webpack4个人学习详细笔记（二)--样式处理

样式处理1

yarn  add css-loader style-loader -D
yarn add less less-loader -D

  module: { // 模块
    rules: [ // 规则
      /** loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader */
      // loader的特点： 希望单一，
      // loader的顺序：默认是从右向左执行
      { 
        test: /\.css$/,
        use: [
          {        // loader还可以写成对象的形式，这样就可以配置
            loader: 'style-loader',
            options: {
              insert: 'head' // 默认css文件位置放在顶部
            }
          },
          'css-loader'
        ]
      },
      // 处理Less文件
      { 
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader', // 把css插入到head中
            options: {
              insert: 'head' // 默认css文件位置放在顶部
            }
          },
          'css-loader', // 解析@import这种语法，把多个css 合成一个
          'less-loader'
        ]
      },
    ]
  }

image.png

样式处理2

2.1 抽离css样式

yarn add mini-css-extract-plugin -D

// webpack 是node 写出来的， node  的写法

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'css/main.css', // css 抽离出来的文件
    })
  ],
  module: {
    rules: [
      { 
        test: /\.css$/,
        use: [
          // {
          //   loader: 'style-loader',
          // },
          MiniCssExtractPlugin.loader, // css-loader处理完 css 后，在html上创建一个style标签，放进去
          'css-loader',
        ]
      },
      // 处理Less文件
      { 
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
    ]
  }
}

image.png

2.2 给css 加上浏览器前缀

image.png

yarn add postcss-loader autoprefixer -D

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css',
    })
  ],
  module: {
    rules: [
      { 
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader', // 注意顺序，并且要记得添加 postcss.config.js 文件
        ]
      },
      { 
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
    ]
  }
}

image.png

还要在package.json上 配置browserlist对象

  "browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

结果：
npm run build 后，会自动给css加上前缀

image.png

2.3 压缩css--优化css资源
npmjs 上搜索 ‘mini-css-extract-plugin’

yarn add optimize-css-assets-webpack-plugin -D

npm run build 后，会发现css压缩了，但js又没有了，根据文档，加上

yarn add terser-webpack-plugin -D

// webpack 是node 写出来的， node  的写法

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
let TerserJSPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: { // 优化项
    minimizer: [
      new TerserJSPlugin({}), // 压缩JS 可填一些其他参数
      new OptimizeCSSAssetsPlugin() // 压缩CSS 可填一些其他参数
    ]
  },
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'main.css',
    })
  ],
  module: {
    rules: [
      { 
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ]
      },
      { 
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
    ]
  }
}