共计 3902 个字符,预计需要花费 10 分钟才能阅读完成。
前言
对于 webpack 的配置以及常用模块大家应该都比较熟悉,本文将说一说 webpack 的一些常用插件,以及用法。
目录
1. 内置插件
名称 | 参数 | 说明 | 用法 |
---|---|---|---|
DefinePlugin | Object | 编译时配置的全局常量,开发模式和发布模式的构建允许不同的行为非常有用 | DefinePlugin |
HotModuleReplacementPlugin | – | 热更新模块 | |
NoEmitOnErrorsPlugin | – | 打包出错时不把错误输出到文件 | |
NamedModulesPlugin | – | 显示模块相对路径 | |
ProvidePlugin | – | 自动加载模块 | ProvidePlugin |
PrefetchPlugin | context: 目录的绝对路径,request: 模块路径 | 预加载模块请求 |
2. 其他插件
名称 | 参数 | 说明 | 用法 |
---|---|---|---|
CopyWebpackPlugin | Array | 拷贝文件夹或文件到指定目录 | CopyWebpackPlugin |
HtmlWebpackPlugin | – | 在编译目录下生成 html,并将打包后的 js 文件插入 script 标签中 | HtmlWebpackPlugin |
ExtractTextPlugin | – | 把打包文件中的文本提取到一个文件 | ExtractTextPlugin |
OptimizeCSSPlugin | – | 优化压缩 css 文件 | OptimizeCSSPlugin |
UglifyJsPlugin | – | 压缩 JavaScript 文件 | UglifyJsPlugin |
WebpackDevServer | 提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能 | WebpackDevServer | |
WebpackHotMiddleware | 把 webpack 处理过的文件发送到一个 server | webpackHotMiddleware |
用法介绍
DefinePlugin
- 如果这个值是一个字符串,它会被当作一个代码片段来使用。
- 如果这个值不是字符串,它会被转化为字符串 (包括函数)。
- 如果这个值是一个对象,它所有的 key 会被同样的方式定义。
- 如果在一个 key 前面加了 typeof, 它会被定义为 typeof 调用。
new webpack.DefinePlugin({PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_HTML5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object'),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});
console.log('Running App version' + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');
ProvidePlugin
自动加载模块,而不必到处 import 或 require。
任何时候,当 identifier 被当作未赋值的变量时,module 就会自动被加载,并且 identifier 会被这个 module 导出的内容所赋值。(或者被模块的 property 导出的内容所赋值,以支持命名导出 (named export))。
new webpack.ProvidePlugin({
identifier: 'module1',
// ...
});
new webpack.ProvidePlugin({identifier: ['module1', 'property1'],
// ...
});
对于 ES2015 模块的 default export,你必须指定模块的 default 属性。
CopyWebpackPlugin
拷贝文件夹或文件到指定目录
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin([{ from: 'source', to: 'dest'},
{
from: 'other',
to: 'public',
ignore: ['*.js'],
flatten: false, // 仅复制文件。用于文件夹和文件同名时
},
]),
],
};https://webpack.docschina.org/plugins/copy-webpack-plugin/#ignore
查看更多
HtmlWebpackPlugin
该插件将为你生成一个 HTML 文件,其中包括使用 script 标签中引入 webpack 打包 js。
如果你有多个 webpack 入口点,他们都会在生成的 HTML 文件中的 script 标签内。
如果你有任何 CSS assets 在 webpack 的输出中(例如,利用 MiniCssExtractPlugin 提取 CSS),那么这些将被包含在 HTML head 中的 <link> 标签内。
new HtmlWebpackPlugin({
title: 'Webpack App' // 用于生成的 HTML 文档的标题 默认为 Webpack App
filename: 'index.html', // 将 HTML 写入的文件 默认 index.html
template: 'index.html', //webpack 模板的相对或绝对路径。默认 src/index.ejs
//template: path.resolve(__dirname, '../index.ejs'),
inject: true, //true || 'head' || 'body' || false 打包后的 js 引入位置 body/head
favicon: String,
meta: Object,
base: Object|String|false,
showErrors: Boolean, // 将它错误信息写入页面
}),
ExtractTextPlugin
把打包文件中的文本提取到一个文件通常用于提取 css
//webpack4
module: {
rules: [
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader",
publicPath: "/dist"
})
}
]
}
plugins: [
new ExtractTextPlugin({
filename: "bundle.css",
disable: false,
allChunks: true
})
]
OptimizeCSSPlugin
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {preset: ['default', { discardComments: { removeAll: true} }],
},
canPrint: true
})
UglifyJsPlugin
new UglifyJsPlugin({
uglifyOptions: {
compress: {warnings: false}
},
sourceMap: true,
parallel: true
}),
WebpackDevServer
提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能
module.exports = {
devServer: {contentBase: './dist'}
};
查看详细配置
WebpackHotMiddleware
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// 告诉 express 使用 webpack-dev-middleware,// 以及将 webpack.config.js 配置文件作为基础配置
app.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath}));
// 将文件 serve 到 port 3000。app.listen(3000, function () {console.log('Example app listening on port 3000!\n');
});
也可以配合 devServer
const WebpackDevServer = require('webpack-dev-server')
const compiler = webpack(webpack.conf)
hotMiddleware = webpackHotMiddleware(compiler, {
log: false,
//path
heartbeat: 2500
})
const server = new WebpackDevServer(
compiler,
{contentBase: path.join(__dirname, '../'),
quiet: true,
before (app, ctx) {app.use(hotMiddleware)
ctx.middleware.waitUntilValid(() => {})
}
}
)
server.listen(3000)
正文完