关于webpack:webpack-plugins插件

39次阅读

共计 1947 个字符，预计需要花费 5 分钟才能阅读完成。

本节咱们来学习 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。

webpack 中有很多插件，上面是一些罕用的插件，咱们来看一下：

extract-text-webpack-plugin：将 css 成生文件，而非内联。该插件的次要是为了抽离 css 款式，避免将款式打包在 js 中引起页面款式加载错乱的景象。
DefinePlugin：定义全局常量插件，咱们能够在模块当中间接应用这些变量，无需作任何申明，DefinePlugin 是 webpack 自带的插件。
EnvironmentPlugin：定义环境变量插件。
BannerPlugin：在代码中增加版权正文等。
HotModuleReplacementPlugin：模块热更新插件，开启模块热替换性能，通过监听文件变动并主动加载被批改的文件来缩小烦人的浏览器手动从新加载。
ProgressPlugin：构建进度插件。
ProvidePlugin：主动加载模块，例如呈现 $ 则加载 jQuery 等罕用库。
IgnorePlugin：用于疏忽局部文件。