java web plugins_webpack4 plugins 篇

demo 代码点此，篇幅有限，仅介绍几个常用的。

start

什么是 plugins ?

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

plugins 可用于执行范围更广的任务，如打包优化，资源管理和重新定义环境中的变量。

该插件将为你生成一个 HTML5 文件， 并帮你引入 webpack 打包好的 js 等文件.

安装：

npm i -D html-webpack-plugin

在 webpack.config.js 中配置：

const path = require('path');

+ const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

// mode: 'production',

mode: 'development',

// 入口

// entry: './src/index.js',

entry: {

main: './src/index.js',

},

module: {...},

+ plugins: [

+ new HtmlWebpackPlugin({

+ title: 'webpack4 plugins 篇',

+ template: './src/index.html'

+ }),

+ ],

// 出口

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

}

然后在 src 目录下创建 index.html 作为模板：

用于删除/清除构建文件夹的 webpack 插件，其实就是打包前先把 dist 文件夹清空。

依然是安装：

npm i -D clean-webpack-plugin

然后配置：

// webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

+ const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

mode: 'development',

entry: {

main: './src/index.js',

},

module: {...},

plugins: [

new HtmlWebpackPlugin({

title: 'webpack4 plugins 篇',

template: './src/index.html'

}),

+ new CleanWebpackPlugin(),

],

// 出口

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist'),

},

}

模块热替换插件，即 HMR，webpack4 自带插件，无需安装，在开发者模式下配合devServer使用。

注意: 永远不要在生产环境(production)下启用 HMR

安装 webpack-dev-server：

npm i -D webpack-dev-server

配置：

// webpack.config.js

...

+ const webpack = require('webpack');

module.exports = {

mode: 'development',

entry: {

main: './src/index.js',

},

module: {...},

plugins: [

new HtmlWebpackPlugin({

title: 'webpack4 plugins 篇',

template: './src/index.html'

}),

new CleanWebpackPlugin(),

+ new webpack.HotModuleReplacementPlugin(),

],

+ devServer: {

+ contentBase: path.resolve(__dirname, "dist"),

+ // 启用 gzip

+ compress: true,

+ open: true,

+ port: 9000,

+ hot: true,

+ hotOnly: true,

+ },

// 出口

output: {...},

}

然后在 package.josn 中的 script 里配置命令，方便实用。

// package.json

...

"scripts": {

+ "start": "webpack-dev-server",

"bundle": "webpack"

},

...

然后跑命令：

npm start

接着修改 index.less，切回浏览器，你会发现 css 效果已经改了。

可以试试修改 js 模块看看效果，修改 index.js：

// index.js

// 在最后面加上这段代码

...

+ if (module.hot) {

+ module.hot.accept('./components/Header', () => {

+ Header();

+ })

+ }

然后重新启动 webpack-dev-server，再修改 Header.js：

// Header.js

...

header.innerText = '修改后的header';

...

再切回浏览器，你会发现新增了一个修改过的 Header。

mini-css-extract-plugin 将CSS提取到单独的文件中，类似功能的有 extract-text-webpack-plugin(已废弃)，两者相比，mini-css-extract-plugin 的优点：

异步加载

没有重复的编译(性能)

更容易使用

特定于CSS

安装：

npm i -D mini-css-extract-plugin

然后配置：

// webpack.config.js

...

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

module.exports = {

mode: 'development',

entry: {...},

module: {

rules: [

...

{

// 打包 css、less

test: /.(css|less)$/,

use: [

// 这里一定要加

+ {

+ loader: MiniCssExtractPlugin.loader,

+ },

{

loader: 'css-loader',

options: {

importLoaders: 2,

}

},

'less-loader',

'postcss-loader',

],

}],

},

plugins: [

...

+ new MiniCssExtractPlugin({

+ filename: 'css/[name].css',

+ chunkFilename: 'css/[id].css',

+ }),

],

devServer: {...},

// 出口

output: {...},

}

接着执行npm run bundle打包，你会发现 css 都打包起来了。

可以去除未使用的 css，一般与 glob、glob-all 配合使用。

安装：

npm i -D purgecss-webpack-plugin glob

配置：

// webpack.config.js

...

+ const glob = require('glob');

+ const PurgecssPlugin = require('purgecss-webpack-plugin');

module.exports = {

mode: 'development',

entry: {...},

module: {...},

plugins: [

...

+ new PurgecssPlugin({

+ paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`,

+ {

+ // 不匹配目录，只匹配文件

+ nodir: true,

+ }),

+ }),

],

devServer: {...},

// 出口

output: {...},

}

在 production 下打包，js 文件是会自动压缩的，但 css 不会，所以使用 optimize-css-assets-webpack-plugin 进行压缩 css。

安装：

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

配置：

// webpack.config.js

...

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

module.exports = {

mode: 'development',

entry: {...},

module: {...},

plugins: [

...

+ new OptimizeCssAssetsPlugin(),

],

devServer: {...},

// 出口

output: {...},

}

打包后，你会发现 css 文件都压缩好了。

备注

篇幅有限，所以就不多 bb 了。