frontLearn

Appearance

css打包 ​

js
// loader执行顺序，先右后左(从下至上)
use:['style-loader', 'css-loader']
js
// 安装依赖
npm install -D css-loader style-loader

webpack.config.js

js
/**
 * webpack css打包
 */
const { resolve } = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output:{
    path: resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },

  module:{
    rules:[
    // 指定多个配置规则
      {
        test: '/\.css$/i',
        use:[
          // 2.将 JS 中的样子， 挂载到 <style> 标签中
          'style-loader',
          // 1.css-loader 按照 CommonJS规范，将样式文件，输出到JS中
          'css-loader'
        ]
      }
    ]
  }
}

/src/css/main.css

css
html{
  font-size: 66px;
}

/src/index.js

js
import './css/main.css';

/src/index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./dist/bundle.js"></script>
</head>
<body>
  hello
</body>
</html>

结果

less打包 ​

js
use:['style-loader', 'css-loader', 'less-loader']
js
// 安装依赖
npm install -D css-loader style-loader less less-loader

webpack.config.js

js
/**
 * webpack less打包
 */
const { resolve } = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output:{
    path: resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },

  module:{
    rules:[
    // 指定多个配置规则
      {
        test: '/\.less$/i',
        use:[
          // 3.将 JS 中的样子， 挂载到 <style> 标签中
          'style-loader',
          // 2.css-loader 按照 CommonJS规范，将样式文件，输出到JS中
          'css-loader'
          // 1.将 less 转换为普通的 css
          'less-loader'
        ]
      }
    ]
  }
}

/src/css/main.less

css
@bg-color: #f04;

html, body{
  padding: 0;
  margin: 0;
}

body{
  background-color: @bg-color;
}

div{
  background-color: @bg-color;
}

/src/index.js

js
import './css/main.less';

/src/index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./dist/bundle.js"></script>
</head>
<body>
  hello
</body>
</html>

结果

css-打包成独立文件 ​

需要安装插件

js
npm install mini-css-extract-plugin -D

引入插件(webpack.config.js)

js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

替换style-loader

js
use:['MiniCssExtractPlugin.loader', 'css-loader']
// 1. style-loader:将css打包到<style>标签中
// 2. MiniCssExtractPlugin.loader: 将css打包到独立文件中

配置插件

js
new MiniCssExtractPlugin({})

webpack.config.js

js
/**
 * webpack css-打包成独立文件
 */
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  // 打包模式
  mode: 'development',
  // 入口文件 
  entry: './src/index.js',
  // 出口配置
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 模块配置
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 'style-loader',
          // 2.将 css 打包到独立文件中
          MiniCssExtractPlugin.loader,
          // css-loader 按照 CommonJS规范，
          // 1.将样式文件，输出到JS中
          'css-loader',
        ]
      },
      {
        test: /\.less$/i,
        use: [
          // 'style-loader',
          // 3.将 css 打包到独立文件中
          MiniCssExtractPlugin.loader,
          // 2.css-loader 按照 CommonJS规范，将样式文件，输出到JS中
          'css-loader',
          // 1.将 less 转换为普通的 css
          'less-loader'
        ]
      }
    ]
  },
  // 插件配置
  plugins:[
    new MiniCssExtractPlugin({
      // 如果不写，默认以output输出为准。
      filename: 'css/[name].css'
    })
  ]
}

压缩css ​

安装

js
npm i optimize-css-assets-webpack-plugin -D

引入

js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

配置

js
new OptimizeCssAssetsPlugin({})

结果

js
/**
 * webpack 打包
 */
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  // 打包模式
  mode: 'development',
  // 入口文件 
  entry: './src/index.js',
  // 出口配置
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 模块配置
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 3.将 JS 中的样式，挂载到 <style> 标签中
          // 'style-loader',

          // 3.将 css 打包到独立文件中
          MiniCssExtractPlugin.loader,

          // css-loader 按照 CommonJS规范，
          // 2.将样式文件，输出到JS中
          'css-loader'
        ]
      },
      {
        test: /\.less$/i,
        use: [
          // 4.将 JS 中的样式，挂载到 <style> 标签中
          // 'style-loader',

          // 4.将 css 打包到独立文件中
          MiniCssExtractPlugin.loader,

          // 3.css-loader 按照 CommonJS规范，将样式文件，输出到JS中
          'css-loader',

          // 1.将 less 转换为普通的 css
          'less-loader'
        ]
      }
    ]
  },
  // 插件配置
  plugins:[
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new OptimizeCssAssetsPlugin()
  ]
}

内容配置不是很完整，更多配置前往webpack官网查看。

掘金作者同款内容，欢迎前往评论、支持