摘要:前言对于的配置以及常用模块大家应该都比较熟悉,本文将说一说的一些常用插件,以及用法。如果在一个前面加了它会被定义为调用。或者被模块的导出的内容所赋值,以支持命名导出。用于生成的文档的标题默认为将写入的文件默认模板的相对或绝对路径。
前言
对于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 |
如果这个值是一个字符串,它会被当作一个代码片段来使用。
如果这个值不是字符串,它会被转化为字符串(包括函数)。
如果这个值是一个对象,它所有的 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中的标签内。
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" } };
查看详细配置
WebpackHotMiddlewareconst 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! "); });
也可以配合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)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54967.html
摘要:前言对于的配置以及常用模块大家应该都比较熟悉,本文将说一说的一些常用插件,以及用法。如果在一个前面加了它会被定义为调用。或者被模块的导出的内容所赋值,以支持命名导出。用于生成的文档的标题默认为将写入的文件默认模板的相对或绝对路径。 前言 对于webpack的配置以及常用模块大家应该都比较熟悉,本文将说一说webpack的一些常用插件,以及用法。 目录 1.内置插件 名称 参数 说明...
摘要:根据依赖关系,按照配置文件把模块函数分组打包成若干个。会随着自身的的修改,而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割,下面详解还有一些新的插件,。 1. 前端工程化项目打包历史 前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件 自从xmlhttprequest被挖掘出来,网页能够和服务端通讯,js能做的事越来越多...
摘要:根据依赖关系,按照配置文件把模块函数分组打包成若干个。会随着自身的的修改,而发生变化。只需要在命令行运行时带上参数就搞定一些插件的废除和替换废弃了顶替者用属性变化压缩优化代码分割,下面详解还有一些新的插件,。 1. 前端工程化项目打包历史 前端工程化之前的时代略过 1. 半自动执行脚本来压缩合并文件 自从xmlhttprequest被挖掘出来,网页能够和服务端通讯,js能做的事越来越多...
阅读 3699·2021-10-12 10:11
阅读 1952·2019-08-30 15:53
阅读 1569·2019-08-30 13:15
阅读 2278·2019-08-30 11:25
阅读 1782·2019-08-29 11:24
阅读 1625·2019-08-26 13:53
阅读 3497·2019-08-26 13:22
阅读 1725·2019-08-26 10:24