[Webpack] Create Separate webpack Configs for Development and Production with webpack-merge

最新推荐文章于 2025-08-21 20:17:18 发布

转载最新推荐文章于 2025-08-21 20:17:18 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/10386308.html

文章标签：

#webpack #ViewUI

本文介绍如何将Webpack配置分为开发和生产模式，通过使用webpack-merge插件，创建base、dev和prod三个配置文件，分别针对不同环境进行优化，以实现更好的开发者体验和用户性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 webpackconfig 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"
  }