[Webpack] Create Separate webpack Configs for Development and Production with webpack-merge
webpack for and with create Merge development production
2023-09-14 09:00:49 时间
The development
and production
modes in webpack
optimize the output in different ways. In development
mode, the focus is on faster builds and a better developer experience. In production
mode, the focus is on highly optimized bundles, leading to a better user experience. The good news is, we can have both. In this lesson, we'll separate our webpack
config into two configurations and update our scripts to run the right config for our needs.
Install:
npm i -D webpack-merge
Create a webpack.config.base.jf:
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'app.bundle.js' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } ] }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })] }
webpack.config.dev.js:
const merge = require('webpack-merge') const baseConfig = require('./webpack.config.base') module.exports = merge(baseConfig, { mode: 'development' })
webpack.config.prod.js:
const merge = require('webpack-merge') const baseConfig = require('./webpack.config.base') module.exports = merge(baseConfig, { mode: 'production' })
Update scripts to adopt changes:
"scripts": { "build": "webpack --config webpack.config.prod.js", "dev": "webpack --watch --config webpack.config.dev.js", "test": "echo \"Error: no test specified\" && exit 1" }
相关文章
- [webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突
- 入门webpack的最佳实践(基于webpack4.X 5.X)--打包速度优化
- webpack打包原理分析和实现(一)
- Webpack最佳实践
- Webpack完整打包流程分析
- webpack模块化的原理
- Webpack高级配置实战
- webpack-dev-server使用报错
- webpack
- Webpack中的文件指纹
- Webpack打包时将文件内联
- webpack dll 提升构建速度
- 你需要知道的webpack高频面试题_2023-03-15
- webpack原理(1):Webpack热更新实现原理代码分析
- webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建
- loopOracle中的循环编程:For Loop游标(oracle游标for)
- 使用Linux中的For循环实现简单程序(linux的for循环)
- 的应用使用For语句提高Linux效率(linux中for语句)
- webpack快速构建基于Koa2、MySQL和Webpack的Web应用(koa2mysql)
- 技巧使用Oracle的FOR循环加快编程效率(oracle的for循环)
- MySQL中使用FOR循环的实践(mysql的for循环)
- Linux下如何优雅地使用For循环(linux下for循环)
- Oracle:学习如何使用For遍历(oracle for遍历)
- 循环Oracle环境下使用For循环的指南(oracle中使用for)
- 遍历Oracle中用For反向遍历字符串的简单示例(oracle中for反向)
- 与Oracle中的FOR语句实现数据删除(oracle中for删除)