webpack6——样式处理2

1.如何抽离css样式

也就是把css样式最终以link的形式插入到文件中，style-loader会默认把样式插到head标签中的style标签，我们需要另外一个插件（mini-css-extract-plugin）来抽离样式。

1.安装mini-css-extract-plugin

2.引入mini-css-extract-plugin

//webpack.config.js
let MiniCssExtractPlugin = require('mini-css-extract-plugin')

3.在plugins的对象中，新建MiniCssExtractPlugin 对象，在对象中指出抽离出的样式文件名称

//webpack.config.js
module.exports = {
......
 plugins:[
        new MiniCssExtractPlugin({
            filename:'main.css' //被抽离的css样式的名称
        })
    ]
    }

4.指明到底哪一类型的文件需要被单独抽离成样式文件

这里需要MiniCssExtracPlugins文件中的loader，在module中的相应模块中设置

//webpack.config.js
  module:{//模块
        rules:[
         {test:/\.css$/,use:[MiniCssExtractPlugin.loader,//该插件的意思是将css文件以link标签的形式引入
            'css-loader']},
              //还有stylus-loaer，sass-loader
         {test:/\.less$/,use:[MiniCssExtractPlugin.loader,//该插件的less文件以link标签的形式插入
            'css-loader','less-loader']},
         
        ]

    }

5.如何抽离多个样式文件

如果只是new了一个插件对象，那么最终都会生成一个样式文件，如果想要不同类型的样式被抽离成不同的样式，那么只需要new多个插件对象，进行多个命名，

//webpack.config.js
let MiniCssExtractPlugin1 = require('mini-css-extract-plugin')
let MiniCssExtractPlugin2= require('mini-css-extract-plugin')

 plugins:[
        new MiniCssExtractPlugin1({
            filename:'main1.css' //被抽离的css样式的名称
        })，
          new MiniCssExtractPlugin2({
           filename:'main2.css' //被抽离的css样式的名称
        })，
    ]

  module:{//模块
        rules:[
         {test:/\.css$/,use:[MiniCssExtractPlugin1.loader,//该插件的意思是将css文件以link标签的形式引入
            'css-loader']},
              //还有stylus-loaer，sass-loader
         {test:/\.less$/,use:[MiniCssExtractPlugin2.loader,//该插件的less文件以link标签的形式插入
            'css-loader','less-loader']},
         
        ]

    }

6.如何自动给抽离出的css样式加入浏览器前缀

需要单独的包 autoprefixer 和插件 postcss-loader，
（1）安装插件
（2）新建配置文件 postcss.config.js ,在文件中进行设置

// postcss.config.js
module.exports = {
    plugins:[require('autoprefixer')]
}

(3)在webpack.config.js 中设置postcss-loader插件，postcss-loader比css-loader先执行。

//webpack.config.js
   module:{//模块
        rules:[
         {test:/\.css$/,use:[MiniCssExtractPlugin1.loader,//该插件的意思是将css文件以link标签的形式引入
            'css-loader','postcss-loader']},
              //还有stylus-loaer，sass-loader
         {test:/\.less$/,use:[MiniCssExtractPlugin2.loader,//该插件的less文件以link标签的形式插入
            'css-loader','postcss-loader','less-loader']},
         
        ]

    }

至此样式中的前缀已经成功添加

7.如何压缩打包好的css

可以在npm官方学习网站了解mini-css-extract-plugin
(1)安装优化插件optimize-css-assets-webpack-plugin，
（2）引入optimize-css-assets-webpack-plugin 模块

//webpack.config.js
let optimizdCss = require('optimize-css-assets-webpack-plugin')

（3）在module中加入优化项

//webpack.config.js
module.exports = {
    optimization:{//优化项
        minimizer:[
            new OptimizdCss()
        ]
    }
    ...
   }

采用webpack命令之后，可以发现，main.css 这行代码优化成了一行。

8.优化js

1，安装插件’terser-webpack-plugin’
2.在项目中引入插件

//webpack.config.js
let TerserJSPlugin = require('terser-webpack-plugin');

3.在module中进行配置

//webpack.config.js
module.exports = {
    optimization:{//优化项
        minimizer:[
            new TerserJSPlugin({}),
            new OptimizdCss()
        ]
    },
    ...
   }