对webpack常用的plugin作一个整合👌.

webpack

更新


[2019-1-21]

Added

  • Initial release

[2019-4-26]

Changed

  • 更换文章title猎奇系列
  • 文章格式调整

一、html-webpack-plugin


自动生成并管理 index.html 文件

1
2
3
4
5
6
7
{
plugins: [
new htmlWebpackPlugin({
title: '',
})
],
}

二、mini-css-extract-plugin


分离.css文件到单独trunk, 代替 extract-text-webpack-plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const envMode = process.env.NODE_ENV !== 'production';

{
plugins: [
new miniCssExtractPlugin({
filename: devMode
? '[name].css'
: '[name.[hash].css]',
chunkFilename: devMode
? '[id].css'
: '[id].[hash].css',
}),
],

module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: devMode
? 'style-loader'
: miniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
},
},
{ loader: 'postcss-loader' },
{ loader: 'less|sass-loader' },
],
}
],
},
}

三、optimize-css-assets-webpack-plugin


压缩 .css 文件, 与 postcss 插件功能相同, 都使用了 cssnano.

1
2
3
4
5
{
plugins: [
new optimizeCssAsstesWebpackPlugin(),
],
}

四、cssnano


压缩css文件

五、colors


terminal的log日志添加颜色

1
console.log('colors'.green);

六、webpack-dev-server


热部署服务器

package.json

1
2
3
scripts: {
"start": "webpack-dev-server"
}

webpack.config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
devServer {
open: true,
hot: true,
port: 3333,
compress: true,
clientLogLevel: 'none',
before(app) {
console.log(
`App running at http://localhost:${this.port}`.green
);
},
},
}