Nucky发布于 2020-07-06 我的环境win 10node v10.13.0npm 6.13.4webpack 4.43.0webpack-cli 3.3.12webpack-dev-server 3.11.0webpack-merge 5.0.7引言

为了把开发环境的配置和生产环境的配置区分开来，我们提取公共配置到到一个配置文件，然后把dev和prod的配置分离。

这里是对每一步的具体操作，主要就是修改配置文件

修改package.json，加入下面的scripts配置，我们dev环境会用到webpack-dev-server，但prod环境就不需要了

 \"scripts\": { \"--\": \"先到当前目录找webpack\", \"build\":\"webpack --config ./src/build/webpack.prod.js\", \"dev\":\"webpack-dev-server --config ./src/build/webpack.dev.js\" },

在src目录新建一个build文件夹，然后复制3份webpack.config.js，分别命名为webpack.common.js，webpack.dev.js，webpack.prod.js

webpack.common.js内容如下，具体视所在环境而定

//打包完创建一个index.htmlconst HtmlWebpackPlugin = require(\'html-webpack-plugin\');//打包前清理dist目录const {CleanWebpackPlugin} = require(\'clean-webpack-plugin\')const path = require(\'path\');const webpack = require(\'webpack\');module.exports = { entry:{ bundle:\'./src/index.js\', }, module:{ rules:[{ test:/\\.(jpg|png|gif)$/, use:{ loader:\'url-loader\', options:{ //placeholder,占位符 name:\'[name]_[hash].[ext]\', //指定文件输出路径 outputPath:\"images/\", //大于limit则会打包文件返回文件名给js，小于limit会把文件以base64的形式放到js文件中 limit:20480 } } },{ test:/\\.css$/, //webpack中loader执行有先后顺序，按照从下到上，从右到左来执行 use:[\"style-loader\", { loader:\"css-loader\", options:{ //在scss文件引入其它scss的时候，也会从下往上走2个loader，再到 //css-loader，避免遗漏掉import的scss文件 importLoaders:2, //让css支持模块化打包，不让一个css作用于js的全局 // modules:true, } }, \"sass-loader\", \"postcss-loader\" ], }, { test:/\\.(ttf|eot|svg|wolf|wolf2|woff)$/, use:{ loader:\'file-loader\', options:{ outputPath:\"font/\", } } }, { test: /\\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: \'babel-loader\', options: { // presets: [[\'@babel/preset-env\',{useBuiltIns:\'usage\'}],[\"@babel/preset-react\"]], presets: [[\"@babel/preset-react\"]], plugins: [[\'@babel/plugin-transform-runtime\']] } } } ] }, output:{ // publicPath:\"/\", filename: \'[name].js\', path: path.resolve(\"./src\",\'dist\') }, plugins: [ new HtmlWebpackPlugin({ template:\"src/template/index.html\" },), new CleanWebpackPlugin() ]}

安装webpack-merge依赖

npm i webpack-merge -D

把公共配置和每种环境独有配置合并导出
webpack.dev.js如下

const path = require(\'path\');const webpack = require(\'webpack\');const {merge} = require(\'webpack-merge\');const commonConfig = require(\'./webpack.common\');const devConfig = { mode:\'development\', //可以找出报错代码的源代码路径 //cheap 只报告行号（不加会报告列） module 会报告loader及第三方依赖的错误位置 //加了inline就不产生映射文件了 devtool:\'cheap-module-eval-source-map\', devServer:{ //会把打包的东西放到内存里面 contentBase:\'./dist\', open:true, hot:true, //模块热更新，不会直接刷新浏览器，影响已经渲染的js模块 hotOnly:true,//就算没渲染好，也不直接刷新 }, plugins: [ new webpack.HotModuleReplacementPlugin(), ]}//合并公共配置文件和开发配置文件module.exports = merge(commonConfig,devConfig);

webpack.prod.js如下

const {merge} = require(\'webpack-merge\');const commonConfig = require(\'./webpack.common\');const prodConfig = { mode:\'production\', //可以找出报错代码的源代码路径 //cheap 只报告行号（不加会报告列） module 会报告loader及第三方依赖的错误位置 //加了inline就不产生映射文件了 //生产环境不需要eval devtool:\'cheap-module-source-map\', plugins: [ ]}module.exports = merge(commonConfig,prodConfig);

避免不同环境不同配置的复杂情况下出现问题，影响开发效率，把不同环境的配置剥离掉

Nucky

反者道之动，弱者道之用

Nucky

反者道之动，弱者道之用

Copyright © 2011-2021 SegmentFault. 当前呈现版本 21.03.23

浙ICP备15005796号-2浙公网安备33010602002000号ICP 经营许可 浙B2-20201554

杭州堆栈科技有限公司版权所有