webpack plugins插件
本节我们来学习 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://segmentfault.com/a/1190000040342976