# plugins

插件是webpack的支柱功能。webpack自身也是构建于你在webpack配置中用到的相同的插件系统之上!插件目的在于解决loader无法实现的其他事。

# 使用plugins

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

# 常用plugin

# HtmlWebpackPlugin

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

plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: 'index.html',
        minify: {
            removeAttributeQuotes: false, //是否删除属性的双引号
            collapseWhitespace: false, //是否折叠空白
        }
    })
]

1
2
3
4
5
6
7
8
9
10
11
12

TIP

巧用 HtmlWebpackPlugin 的 config 属性

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
        template: './public/index.html',
        filename: 'index.html',
        config: {
            config: {
                title: 'test',
                header: true,
                footer: false
            }
        }
    })
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <% if(htmlWebpackPlugin.options.config.header) { %>
    <link rel="stylesheet" type="text/css" href="//common/css/header.css">
    <% } %>
    <title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>

<body>
</body> 
    <% if(htmlWebpackPlugin.options.config.header) { %>
    <script src="//common/header.min.js" type="text/javascript"></script> 
    <% } %>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

以上将插入 header.css，并且 title 为 test

# CleanWebpackPlugin

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns:['!dll', '!dll/**'] //不删除dll目录下的文件
        })
    ]
}

1
2
3
4
5
6
7
8

# CopyWebpackPlugin

new CopyWebpackPlugin([
    {
        from: './static',
        to: path.resolve(__dirname, 'dist/static'),
        flatten: false // 默认为false，为true的话只拷贝文件
    }
])

1
2
3
4
5
6
7

# MiniCssExtractPlugin

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.css/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader', 这个会与minicss冲突
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# DefinePlugin

DefinePlugin 中的每个键，是一个标识符。

如果 value 是一个字符串，会被当做 code 片段
如果 value 不是一个字符串，会被 stringify
如果 value 是一个对象，正常对象定义即可
如果 key 中有 typeof，它只针对 typeof 调用定义

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development'), // 字符串，或者写为 "'development'"
                FLAG: 'true', //FLAG 是个布尔类型
                EXPRESSION: '1+1' // 2
            }
        })
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12

# 自定义插件

# 剖析

webpack插件是一个具有apply属性的JavaScript对象。apply属性会被webpack compiler调用，并且compiler对象可在整个编译生命周期访问。

class MyPlugin {
    apply(compiler) {
        compiler.hooks.run.tap('myPlugin', compilation => {
            console.log('myPlugin)
        })
    }
}

1
2
3
4
5
6
7

← loader 优化 →