zoukankan      html  css  js  c++  java
  • [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"
      }
  • 相关阅读:
    Java可重入锁ReentrantLock
    Java异步编程
    机器学习 pipeline
    Python 机器学习 唐宇迪泰坦尼克号【最新代码】
    引用sklearn报错ImportError: cannot import name 'cross_validation'
    python机器学习-模型优化(六)
    python机器学习-模型评估(五)
    python机器学习-建模(四)
    python机器学习-特征工程(三)
    Python机器学习-数据预处理(二)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10386308.html
Copyright © 2011-2022 走看看