插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
https://doc.webpack-china.org/plugins/
使用插件的方法
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）
1.BannerPlugin --在每个生成的 chunk 顶部添加 banner
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究')
],
2.UglifyJsPlugin--- js压缩
plugins: [
new webpack.optimize.UglifyJsPlugin()
],
3.html-webpack-plugin 简单创建 HTML 文件，用于服务器访问
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
})
4.HotModuleReplacementPlugin 启用模块热替换 （这个还有点问题。。。。）
它允许你在修改组件代码后，自动刷新实时预览修改后的效果。（永远不要在生产环境(production)下启用 HMR）
用法
- 在webpack配置文件中添加HMR插件；
- 在Webpack Dev Server中添加“hot”参数；
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
+ hot: true
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Hot Module Replacement'
}),
+ new webpack.HotModuleReplacementPlugin(
options
)
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
选项(Options)
包含如下选项：
-
multiStep(boolean)：设置为true时，插件会分成两步构建文件。首先编译热加载 chunks，之后再编译剩余的通常的资源。 -
fullBuildTimeout(number)：当multiStep启用时，表示两步构建之间的延时。 -
requestTimeout(number)：下载 manifest 的延时（webpack 3.0.0 后的版本支持）。
通过在命令行中运行 npm start 来启动并运行 dev server
5.extract-text-webpack-plugin从 bundle 中提取文本（CSS）到单独的文件
安装
npm install --save-dev extract-text-webpack-plugin
配置
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 有多少个css文件就创建多少个实例
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
},
{
test: /\.less$/i,
use: extractLESS.extract([ 'css-loader', 'less-loader' ])
},
]
},
plugins: [
extractCSS,
extractLESS
]
};
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
6.DefinePlugin 允许创建一个在编译时可以配置的全局常量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
7.调试技巧(给webpack添加调试配置)
if (isTest) {
config.devtool = 'inline-source-map';
}
作用: 使用source-map可以在debug的时候看到源代码，方便 查错
