标签：nbsp 结果 sed 拆分 更新 而且 开发 ntb eve
因为在不同的环境下，webpack的配置稍微有点区别，如果我们需要在不同的换将下切换，就得重复修改webpack.config.js配置，这是很麻烦而且还容易改错，所以我们需要把配置文件进行拆分。
在项目根目录下新建build文件夹，然后在build文件夹中新建 webpack.dev.js 、 webpack.prod.js 和 webpack.base.js 三个文件
webpack.dev.js ：是开发环境
webpack.prod.js ：是生产环境
webpack.base.js ：是开发环境和生产环境都用到的共同配置
这几个文件之间的结合靠‘webpack-merge‘这个插件。
安装
npm i webpack-merge -D
开发配置
//webpack.dev.js const webpack=require(‘webpack‘) const merge = require(‘webpack-merge‘)
//引入公共的webpack配置 const baseConfig=require(‘./webpack.base‘) const devConfig={ mode: ‘development‘, devtool: ‘cheap-module-eval-source-map‘,
//热模块更新，开发环境独有 plugins: [ new webpack.HotModuleReplacementPlugin() ],
//树摇配置，开发环境默认没有，需要配置 optimization: { usedExports: true },
//自启服务 devServer: { contentBase: ‘./dist‘, // open: true, //自动打开浏览器 // port: 8080, hot: true, //启用webpack的热模块替换功能 //hotOnly: true //devServer.hot在没有页面刷新的情况下启用热模块替换作为构建失败时的后备 } } //将公告配置和开发配置合并暴露出去 module.exports=merge(baseConfig,devConfig)
生产配置
//webapck.prod.js const merge = require(‘webpack-merge‘) const baseConfig=require(‘./webpack.base‘) const prodConfig={ mode: ‘production‘, devtool: ‘cheap-module-source-map‘ } module.exports=merge(baseConfig,prodConfig)
但是这两个文件还有大量重复的代码，新建 webpack.base.js
//webpack.base.js const path = require(‘path‘) const htmlWebpackPlugin = require(‘html-webpack-plugin‘) const cleanWebpackPlugin = require(‘clean-webpack-plugin‘) module.exports={ entry: { main: ‘./src/index.js‘ }, output: { filename: ‘[name].js‘, path: path.resolve(__dirname,‘dist‘) }, module: { rules:[ { test: /\.(png|jpg|gif)$/, use: { loader: ‘url-loader‘, options: { name: ‘[name].[ext]‘, outputPath: ‘images/‘, limit: 2048 } } }, { test: /\.css$/, use:[ ‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘ ] }, { test: /\.scss$/, use:[ ‘style-loader‘, { loader: ‘css-loader‘, options: { importLoaders: 2, modules: true } }, ‘sass-loader‘, ‘postcss-loader‘ ] }, { test: /\.js$/, exclude: /node_modules/, loader: ‘babel-loader‘ } ] }, plugins: [ new htmlWebpackPlugin({ template: ‘./index.html‘ }), new cleanWebpackPlugin(), ] }
修改 package.json 的 script :
./build/webpack.dev.js 配置文件路劲
{ "scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js" }, }
开发环境：运行 npm run dev ，打开浏览器访问 http://localhost:8080/ 就可以看到结果，由于开启了devServer，打包的文件在内存运行
生产环境：运行 npm run build ， 生成了dist打包文件，可将dist文件放在服务器上
webpack高级概念Develoment 和 Production 不同环境的配置 (系列四)
标签：nbsp 结果 sed 拆分 更新 而且 开发 ntb eve
原文地址：https://www.cnblogs.com/fsg6/p/14490243.html
