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


    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"
      }
  • 相关阅读:
    Tjoi 2017 异或和
    Noi 十连测 建造记者站
    Noi 十连测 基因改造计划
    Noi 十连测 人生的经验
    NOI 十连测 Round 5 T2 运河计划
    NOI 十连测 Round 5 T1
    【ZJOI2018】迷宫
    BZOJ 十连测 day5 T3
    BZOJ 十连测 可持久化字符串
    BZOJ 十连测 二进制的世界
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10386308.html
Copyright © 2020-2023  润新知