webpack plugins插件

Posted 2021-05-20 书和咖啡

本节我们来学习 webpack 中的插件（plugins），插件可以让 webpack 能够执行更多任务，从优化和压缩，到重新定义环境中的变量等，非常强大。

在 webpack 中， Plugin 和 loader 是两个比较容易混淆的概念。loader 用于对模块的源代码进行转换，所以 loader 的执行层面是单个的源文件。而插件的目的在于解决 loader 无法实现的问题，所以插件的功能更加强大，插件的执行层面是整个构建过程。

上一节我们在学习loader 时可以发现，在使用 loader 时是不需要引用的。而在使用插件时我们必须先通过 require 引用该插件。 webpack 中有丰富的内置插件和外部插件，并且允许用户自定义插件。

安装插件

例如我们通过在实际应用中经常会使用到的插件 html-webpack-plugin 来举例，讲一下插件的具体使用。html-webpack-plugin 插件可以用于自动生成基本的 HTML 页面。

首先我们需要先安装 html-webpack-plugin 插件，命令如下所示：

npm install html-webpack-plugin --save-dev

安装好后，插件会自动添加到 package.json 文件中的依赖中，并指定了插件的版本，如下图：

"devDependencies": {
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
}

配置插件

插件安装好后，我们在配置文件 webpack.config.js 中引入这个插件：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引用外部插件

然后在配置中加上 plugins 节点，里面加上此插件实例，plugins 表示插件入口，所有插件都在这里配置。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引用外部插件
module.exports = {
    entry: {
        entry:'./index.js',
    },
    output: {
        path:__dirname + '/dist',
        filename:'./bundle.js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:['style-loader','css-loader']
            }]
    },
    mode: 'production',
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

配置好后，可以执行 npm run build 命令，此时会在 dist 目录下自动生成一个 index.html 文件。index.html 是默认的文件名称。

我们也可以在插件中配置相关属性，例如：

new HtmlWebpackPlugin({
	title: 'webpack的入门学习',
	filename: 'new_test.html'
})

这样 dist 目录下就会生成一个名为 new_test.html 的HTML 文件，HTML 文件的标题为 ”webpack的入门学习“。

html-webpack-plugin 插件的属性：

• title：生成 HTML 文件的标题。
• filename：输出的 HTML 的文件名称。
• template：HTML 模板所在的文件路径。
• inject：注入选项，可选值为 true、body、head、false。
• favicon：设置一个网页图标。
• minify：对 HTML 文件进行压缩，属性值为一个压缩选项或者 false。

常用plugins

webpack 中有很多插件，下面是一些常用的插件，我们来看一下：

• extract-text-webpack-plugin：将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式，防止将样式打包在 js 中引起页面样式加载错乱的现象。

• DefinePlugin：定义全局常量插件，我们可以在模块当中直接使用这些变量，无需作任何声明，DefinePlugin 是 webpack 自带的插件。

• EnvironmentPlugin：定义环境变量插件。

• BannerPlugin：在代码中添加版权注释等。

• HotModuleReplacementPlugin：模块热更新插件，开启模块热替换功能，通过监听文件变化并自动加载被修改的文件来减少烦人的浏览器手动重新加载。

• ProgressPlugin：构建进度插件。

• ProvidePlugin：自动加载模块，例如出现 $ 则加载 jQuery 等常用库。

• IgnorePlugin：用于忽略部分文件。

链接：https://www.9xkd.com/