webpack4知识整理（二）css-loader等配置

• 想要处理css文件也一并打包

npm install -D css-loader style-loader

• webpack.config.js需要新增module配置

module:{
    rules:[
      // css-loader 用来解析css文件 中@import等语法
      // style-loader 用来将css文件插入模板HTML的Head中
      // loader执行顺序从右至左   从下到上执行
      // 多个loader就要用[]进行添加
      // 每个loader只有一个单一作用
      { test:/\.css$/,use:['style-loader','css-loader'] }
    ]

  }

 

•  css-loader 用来解析css文件 中@import等语法

•  style-loader 用来将css文件插入模板HTML的Head中

• loader执行顺序从右至左   从下到上执行

• 多个loader就要用[]进行添加

• 每个loader只有一个单一作用

• loader也可以写成对象的模式如下

module:{
    rules:[
      // css-loader 用来解析css文件 中@import等语法 解析路径
      // style-loader 用来将css文件插入模板HTML的Head中
      // loader执行顺序从右至左  从下到上执行
      // 多个loader就要用[]进行添加
      // 每个loader只有一个单一作用
      { test:/\.css$/,use:[{
        loader:'style-loader',
        options:{
          // 更详细的配置
        }
      },'css-loader'] }
    ]
  }

• 给style-loader的option配置让打包的css文件插入在顶部

options:{
          insertAt:'top'
        }

• 这样写的好处是自己写的样式会覆盖打包好的样式

 

• 处理less或sass需要也需要相应增加loader和test

npm install less less-loader -D

• 在module新增test

{
        test: /\.less$/, use: [{
          loader: 'style-loader',
          options: {
            insertAt: 'top'
          }
        }, 
        'css-loader',
        'less-loader']
      }

• 此时就可以处理less文件了，这里以less为例，lass stylus也可以通过相应的loader完成

• 以上配置只是将css保存在模板的style标签中

 

• 接下来使用抽离成单独文件的方式使用link引入

npm install mini-css-extract-plugin -D

• 安装插件

let MiniCssExtractPlugin = require('mini-css-extract-plugin')  // 在外面引入插件

... ...

plugins:[
    new HTMLWebpackPlugin({
      template:'./src/index.html',
      filename:'index.html',
      minify:{
        removeAttributeQuotes:true,  // 去掉双引号
        collapseWhitespace:false  //变成一行
      },
      hash:true   // 增加hash防止缓存
    }),
    new MiniCssExtractPlugin({
      filename:'main.css'
    })
  ],
  module:{
    rules:[
      // 每个loader只有一个单一作用
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader'] }  //  style-loader  替换
      ,
      {
        test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader'] //  style-loader  替换
      }
    ]
  }

• 将mini-css-extract-plugin插件实例化，filename为文件名

• rules中的里面每个style-loader都被替换为MiniCssExtractPlugin.loader了

• 如果想打包多个css文件可以在从新引入mini-css-extract-plugin插件，名字要取不一样的，然后在实例化，之后再rules中将style-loader进行替换为新写的这个插件名

 

• 还可以给css属性默认加上前缀

npm install postcss-loader autoprefixer -D

• 需要在use中的css-loader之后新增postcss-loader

• 此时还需要在根目录下新建一个postcss.config.js配置文件告诉使用的插件，在这个文件写入以下内容

module.exports ={
  plugins:[
    require('autoprefixer')
  ]
}

• 此时在进行打包，css就会自动加上前缀

 

• 如果想压缩css文件可以去这个网址进行了解  GO

• 需要下载两个插件optimize-css-assets-webpack-plugin 和 terser-webpack-plugin （这里的插件可能会变，具体使用的时候可以去npm官网进行查看）

npm install terser-webpack-plugin optimize-css-assets-webpack-plugin -D

• 接下来在webpack.config.js中进行优化属性的配置

const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');


... ...

module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },

... ..
}

• 这里有两点需要注意：

• 1.mode要在production才会压缩

• 2.如果只写着一个的话new OptimizeCSSAssetsPlugin({})  不写这个 new TerserJSPlugin({})  那么即使在production模式下，JS文件也不会打包，所以这两个插件都要实例化才可以保证css文件和JS文件都被压缩

转载于:https://my.oschina.net/u/3996596/blog/3044139