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"
      }
  • 相关阅读:
    [转]ORACLE 异常错误处理
    Oracle 返回结果集的 存储过程
    [转]Oracle字符串拼接的方法
    [转]Install App to SD
    [转]重新分配内置存储空间 android手机
    Oracle SQL Developer 操作
    [转].net 调用oracle存储过程返回多个记录集
    [转]使用ADO.NET访问Oracle存储过程
    [转]Oracle ORA-01403: no data found Exception SYS_REFCURSOR
    [转]Oracle开发专题之:%TYPE 和 %ROWTYPE
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10386308.html
Copyright © 2011-2022 走看看