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"
      }
  • 相关阅读:
    记录犯得最可笑的错误
    爬虫阶段内容总结
    docker_nginx_Elasticsearch
    git基础
    爬虫pearPro
    爬虫wangyiPro
    sunPro
    docker-compose终极搞定个人博客
    小程序下拉三个小点不显示问题
    vue鼠标拖动
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10386308.html
Copyright © 2011-2022 走看看