webpack 开发模式

Question

Hi i am using webpack in react application. how to differentiate development and production mode in webpack, when npm start dev mode also minifying files i dont want to minify in development mode, Below is my package.json and webpack config file. i tried using below code but no use:

optimization: {
   minimize: false
}

,

{
  "name": "webpack-react-starter",
  "version": "1.0.0",
  "description": "A Webpack + Babel + React Starter bolerplate ",
  "repository": {
    "type": "git",
    "url": "https://github.com/mlomboglia/webpack-react-starter"
  },
  "keywords": [
    "Autoprefixer",
    "PostCSS",
    "Webpack",
    "React",
    "Babel"
  ],
  "author": "Marcos Lomboglia <marcos.lomboglia@gmail.com> (https://marcoslombog.com)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "license": "MIT",
  "browserslist": "> 1%,last 2 versions",
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "autoprefixer": "^9.7.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.6.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "postcss": "^8.1.0",
    "postcss-loader": "^4.0.2",
    "style-loader": "^1.2.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "babel-plugin-react-css-modules": "^5.2.6",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

and webpack config is below:

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
            chunkFilename: '[id].js',
            publicPath: ''
        },
        resolve: {
            extensions: ['.js', '.jsx']
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    exclude: /node_modules/,
                    use: [
                        { loader: 'style-loader' },
                        { 
                            loader: 'css-loader',
                            options: {
                                modules: {
                                    localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
                                },                                                      
                                sourceMap: true
                            }
                         },
                         { 
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    plugins: [
                                        [ 'autoprefixer', {}, ],
                                    ],
                                },
                            }
                          }
                    ]
                },
                {
                    test: /\.(png|jpe?g|gif)$/,
                    loader: 'url-loader?limit=10000&name=img/[name].[ext]'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: __dirname + '/src/index.html',
                filename: 'index.html',
                inject: 'body'
            })
        ]
    };

Answer 1

Instead of adding development/production mode with webpack cli, how about controlling webpack mode in webpack.config.js with node env?

Node env can be added with NODE_ENV=production in the script command in package.json. Also NODE_ENV=development is possible.

// webpack.config.js
module.exports = {
  mode: process.env.NODE_ENV,
  output: ...
}