一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。
html-webpack-plugin
简化HTML文件创建的插件
npm地址
安装
- Webpack 5
npm i --save-dev html-webpack-plugin
复制代码yarn add --dev html-webpack-plugin
复制代码- Webpack 4
npm i --save-dev html-webpack-plugin@4
复制代码yarn add --dev html-webpack-plugin@4
复制代码用法
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
复制代码这将生成一个包含以下内容的文件dist/index.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<script defer src="index_bundle.js"></script>
</head>
<body>
</body>
</html>
复制代码copy-webpack-plugin
将已存在的各个文件或整个目录复制到构建目录中
npm地址
安装
npm install copy-webpack-plugin --save-dev
复制代码或
yarn add -D copy-webpack-plugin
复制代码用法
然后添加这个插件到你的 webpack 配置文件中，例如: webpack.config.js
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
{ from: "other", to: "public" },
],
}),
],
};
复制代码注：
copy-webpack-plugin并不是为了复制从构建过程中生成的文件；相反，它是复制资源树中已经存在的文件，作为构建过程的一部分。- 如果您希望在开发过程中
webpack-dev-server将文件写入输出目录，您可以使用writeToDisk选项或write-file-webpack-plugin强制执行它。 - 您可以从
Asset Objects中获得原始的资源文件名。
uglify-js-plugin
混淆压缩js代码
npm地址
可点击，uglify-js-plugin
安装
npm install uglify-js-plugin --save-dev
复制代码用法
//webpack.config.js
var UglifyJsPlugin = require('uglify-js-plugin');
module.exports = {
entry: {
hello: './src/hello.js'
},
output: {
path: './build',
filename: '[name].js'
},
plugins: [
new UglifyJsPlugin({
compress: true, //default 'true', you can pass 'false' to disable this plugin
debug: true //default 'false', it will display some information in console
})
]
};
复制代码webpack-chain
webpack 的核心配置的创建和修改基于一个有潜在难于处理的 JavaScript 对象。虽然这对于配置单个项目来说还是 OK 的，但当你尝试跨项目共享这些对象并使其进行后续的修改就会变的混乱不堪，因为您需要深入了解底层对象的结构以进行这些更改。
webpack-chain 尝试通过提供可链式或顺流式的 API 创建和修改webpack 配置。API的 Key 部分可以由用户指定的名称引用，这有助于 跨项目修改配置方式 的标准化。
npm地址
可点击，webpack-chain,中文地址
安装
npm install --save-dev webpack-chain
复制代码或
yarn add --dev webpack-chain
复制代码用法
当你安装了 webpack-chain， 你就可以开始创建一个webpack的配置。 对于本指南，我们的示例基本配置 webpack.config.js 将位于我们项目的根目录。
// 导入 webpack-chain 模块，该模块导出了一个用于创建一个webpack配置API的单一构造函数。
const Config = require('webpack-chain');
// 对该单一构造函数创建一个新的配置实例
const config = new Config();
// 用链式API改变配置
// 每个API的调用都会跟踪对存储配置的更改。
config
// 修改 entry 配置
.entry('index')
.add('src/index.js')
.end()
// 修改 output 配置
.output
.path('dist')
.filename('[name].bundle.js');
// 创建一个具名规则，以后用来修改规则
config.module
.rule('lint')
.test(/\.js$/)
.pre()
.include
.add('src')
.end()
// 还可以创建具名use (loaders)
.use('eslint')
.loader('eslint-loader')
.options({
rules: {
semi: 'off'
}
});
config.module
.rule('compile')
.test(/\.js$/)
.include
.add('src')
.add('test')
.end()
.use('babel')
.loader('babel-loader')
.options({
presets: [
['@babel/preset-env', { modules: false }]
]
});
// 也可以创建一个具名的插件!
config
.plugin('clean')
.use(CleanPlugin, [['dist'], { root: '/dir' }]);
// 导出这个修改完成的要被webpack使用的配置对象
module.exports = config.toConfig();
复制代码共享配置也很简单。仅仅导出配置 和 在传递给webpack之前调用 .toConfig() 方法将配置导出给webpack使用。
// webpack.core.js
const Config = require('webpack-chain');
const config = new Config();
// 跨目标共享配置
// Make configuration shared across targets
// ...
module.exports = config;
// webpack.dev.js
const config = require('./webpack.core');
// Dev-specific configuration
// 开发具体配置
// ...
module.exports = config.toConfig();
// webpack.prod.js
const config = require('./webpack.core');
// Production-specific configuration
// 生产具体配置
// ...
module.exports = config.toConfig();
复制代码prerender-spa-plugin
这个插件的目标是提供一个简单的预渲染解决方案，易于扩展，并可用于任何使用web包构建的站点或单页面应用程序。
npm地址
安装
npm i prerender-spa-plugin
复制代码用法
基础用法（webpack.config.js）
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
plugins: [
...
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: [ '/', '/about', '/some/deep/nested/route' ],
})
]
}
复制代码更进一步用法 (webpack.config.js)
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
plugins: [
...
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Optional - The path your rendered app should be output to.
// (Defaults to staticDir.)
outputDir: path.join(__dirname, 'prerendered'),
// Optional - The location of index.html
indexPath: path.join(__dirname, 'dist', 'index.html'),
// Required - Routes to render.
routes: [ '/', '/about', '/some/deep/nested/route' ],
// Optional - Allows you to customize the HTML and output path before
// writing the rendered contents to a file.
// renderedRoute can be modified and it or an equivelant should be returned.
// renderedRoute format:
// {
// route: String, // Where the output file will end up (relative to outputDir)
// originalRoute: String, // The route that was passed into the renderer, before redirects.
// html: String, // The rendered HTML for this route.
// outputPath: String // The path the rendered HTML will be written to.
// }
postProcess (renderedRoute) {
// Ignore any redirects.
renderedRoute.route = renderedRoute.originalPath
// Basic whitespace removal. (Don't use this in production.)
renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><')
// Remove /index.html from the output path if the dir name ends with a .html file extension.
// For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
if (renderedRoute.route.endsWith('.html')) {
renderedRoute.outputPath = path.join(__dirname, 'dist', renderedRoute.route)
}
return renderedRoute
},
// Optional - Uses html-minifier (https://github.com/kangax/html-minifier)
// To minify the resulting HTML.
// Option reference: https://github.com/kangax/html-minifier#options-quick-reference
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
decodeEntities: true,
keepClosingSlash: true,
sortAttributes: true
},
// Server configuration options.
server: {
// Normally a free port is autodetected, but feel free to set this if needed.
port: 8001
},
// The actual renderer to use. (Feel free to write your own)
// Available renderers: https://github.com/Tribex/prerenderer/tree/master/renderers
renderer: new Renderer({
// Optional - The name of the property to add to the window object with the contents of `inject`.
injectProperty: '__PRERENDER_INJECTED',
// Optional - Any values you'd like your app to have access to via `window.injectProperty`.
inject: {
foo: 'bar'
},
// Optional - defaults to 0, no limit.
// Routes are rendered asynchronously.
// Use this to limit the number of routes rendered in parallel.
maxConcurrentRoutes: 4,
// Optional - Wait to render until the specified event is dispatched on the document.
// eg, with `document.dispatchEvent(new Event('custom-render-trigger'))`
renderAfterDocumentEvent: 'custom-render-trigger',
// Optional - Wait to render until the specified element is detected using `document.querySelector`
renderAfterElementExists: 'my-app-element',
// Optional - Wait to render until a certain amount of time has passed.
// NOT RECOMMENDED
renderAfterTime: 5000, // Wait 5 seconds.
// Other puppeteer options.
// (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
headless: false // Display the browser window when rendering. Useful for debugging.
})
})
]
}
复制代码