所以webpack的配置写的差距会非常的大
每个环境编写彼此独立的 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 |- /src |- index.js |- math.js |- /node_modules
webpack.common.js 公共配置
const path = require('path'); // 该插件将为你生成一个 HTML5 文件, // 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { app: './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', });
注意,在环境特定的配置中使用 merge() 功能,可以很方便地引用 webpack.dev.js 和 webpack.prod.js 中公用的 common 配置。webpack-merge 工具提供了各种 merge(合并) 高级功能,但是在我们的用例中,无需用到这些功能。