webpack学习记录(三)-插件

插件是什么

plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。
plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

html-webpack-plugin

根据插件中配置项 template 配置的模板文件生成dist目录下的html文件，把打包生成的js文件自动插入进去，并且可以把html代码进行压缩，去双引号等操作。

安装及配置

npm i html-webpack-plugin -D

安装好后在webpack.config.js中进行引入

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

在webpack.config.js中的module.exports下配置如下属性

plugins:[ new HtmlWebpackPlugin({ template: './src/index.html', //指定模板文件 filename: 'index.html', //生成文件名 minify: { removeAttributeQuotes: true, //删除属性双引号 collapseWhitespace: true, //压缩成一行 }, hash: true //引入的时候添加哈希戳 })]

要想每次打包都生成不一样的文件，可以在输出属性下配置文件名 bundle.[hash:8].js

打包CSS文件

css-loader

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们 。

style-loader

style-loader将css用style标签插入到html文件中

less-loader

把less转换成css

安装

npm i style-loader css-loader -D

npm i less less-loader -D

用法

在webpack.config.js中module.exports下配置如下属性

module: { rule: [ { test: /\.css$/, //正则匹配以css结尾的文件 use: ['style-loader','css-loader','less-loader'] //顺序从右向左，由严格限制，先转换解析后插入。 } ]}

当我们需要在模板html里写内部样式的时候，会被style-loader覆盖，这个时候可以这样配置

module: { rule: [ { test: /\.css$/, //正则匹配以css结尾的文件 use: [ //使用对象可以写入参数，执行其他操作 { loader: 'style-loader', //Loader名 options: { insert: 'top' //将样式插入到顶部 } }, 'css-loader', 'less-loader'] //顺序从右向左，由严格限制，先解析后插入。 } ]}

mini-css-extract-plugin

用来把css抽离出来并且通过link标签引入

安装并引入

npm i mini-css-extract-plugin

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘)

使用

plugins:[ new MiniCssExtractPlugin({ filename: 'main.css', //生成文件名 })],module: { rules: [ { test: /\.css$/, use: { MiniCssExtractPlugin.loader, //代替style-loader 'css-loader' } } ]}

如果想抽离出多个css文件只需创建多个MiniCssExtractPlugin即可。

optimize-css-assets-webpack-plugin

压缩css文件

terser-webpack-plugin

如果使用mini-css-extract-plugin的话，js文件就不会自行压缩了，因此提供了该插件给我们手动压缩js文件。

安装及使用

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

npm i terser-webpack-plugin -D

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')const TerserWebpackPlugin = require('terser-webpack-plugin')module.exports = { optimization: { //优化项 minimizer: [ new TerserJSPlugin({}), new OptimizeCssAssetsWebpackPlugin({}) ] }}

postcss-loader & autoprefixer

用来自动添加浏览器前缀，使用前先在package.json目录下配置浏览器属性。

安装及配置

npm i postcss-loader autoprefixer -D

创建一个postcss.config.js

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

使用

module: { rule: [ { test: /\.css$/, //正则匹配以css结尾的文件 use: ['style-loader','css-loader','postcss-loader'] //顺序从右向左，由严格限制，先转换解析后插入。 } ]}