webpack-merge的使用教程
短信预约 -IT技能 免费直播动态提醒
为什么要用webpack-merge
- development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异
所以webpack的配置写的差距会非常的大 - 在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。
- 而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我们通常建议为
每个环境编写彼此独立的 webpack 配置。 - 虽然，以上我们将 生产环境 和 开发环境 做了细微区分，但是，请注意，我们还是会遵循不重复写配置的原则，保留一个
"common( 公共 )" 配置。为了将这些配置合并在一起，我们将使用一个名为webpack-merge的工具。此工具会引用 “common” 配置，因此我们不必再在环境特定env的配置中编写重复代码。
安装
npm install --save-dev webpack-merge目录结构
webpack-demo
|- package.json
|- package-lock.json
- |- webpack.config.js // 删除全局webpack配置
+ |- webpack.common.js // 新建公共配置
+ |- webpack.dev.js // 新建开发环境配置
+ |- webpack.prod.js // 新建生产环境配置
|- /dist
|- /class="lazy" data-src
|- index.js
|- math.js
|- /node_moduleswebpack.common.js 公共配置
const path = require('path');
// 该插件将为你生成一个 HTML5 文件，
// 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './class="lazy" data-src/index.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};webpack.dev.js 开发环境配置
// 引入webpack-merge
const { merge } = require('webpack-merge');
// 引入公共配置
const common = require('./webpack.common.js');
// 第一个参数是公共配置 第二个参数是环境里的配置
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
});webpack.prod.js 生产环境配置
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
});- 现在，在 webpack.common.js 中，我们设置了 entry 和 output 配置，并且在其中引入这两个环境公用的全部插件。
- 在 webpack.dev.js 中，我们将 mode 设置为 development，并且为此环境添加了推荐的 devtool（强大的 source map）和 devServer 配置。
- 最后，在 webpack.prod.js 中，我们将 mode 设置为 production，
注意，在环境特定的配置中使用 merge() 功能，可以很方便地引用 webpack.dev.js 和 webpack.prod.js 中公用的 common 配置。webpack-merge 工具提供了各种 merge(合并) 高级功能，但是在我们的用例中，无需用到这些功能。
到此这篇关于webpack-merge的使用的文章就介绍到这了,更多相关webpack-merge的使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
