项目结构

一、Webpack

Webpack：4.5.0，默认给你指定 构建输出目录

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "./node_modules/.bin/webpack --mode development --watch",
    "dev": "webpack-dev-server --mode development --content-base ./build/dist",
    "dev:build": "./node_modules/.bin/webpack --mode development",
    "react-dev": "webpack-dev-server --mode development --content-base ./dist --module-bind 'js=babel-loader?presets[]=@babel/preset-react'",
    "react-dev-config": "webpack-dev-server --config ./webpack/webpack.config.js",
    "react-dev-config:build": "./node_modules/.bin/webpack --config ./webpack/webpack.config.js"
  },

二、webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: "cheap-source-map",
  devServer: {
    contentBase: path.resolve(__dirname, '..', 'build/dist'),
    port: 9000,
  },
  entry: {
    app: path.resolve(__dirname, '..', 'src/index.js'),
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, '..', 'build/dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, '..', 'src')
        ],
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react']
        }
      }, {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: true, // 压缩 CSS 文件
              }
            },
            'postcss-loader'
          ]
        })
      }, {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  },
  optimization: {
    // minimize: true, // 压缩js，4.0 替换掉了 UglifyJsPlugin
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        // vendors: {
        //     test: /[\\/]node_modules[\\/]/,
        //     priority: -10
        // },
        /**
         * 将 node_modules 中的代码 压缩成一个 叫 vendors 的js文件中。
         * 我们自己的代码 打入到 entry 选项 配置的js 中。
         */
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        /**
         * 这个不知道有什么用
         */
        /* commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2
        }, */
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  resolve: {
    alias: (function (src) {
      var fs = require('fs');
      var moduleAlias = {
        '@root': src
      };
      return fs
        .readdirSync(src)
        .filter(function (dir) {
          try {
            return fs.statSync(path.resolve(src, dir)).isDirectory();
          } catch (e) {
            return false;
          }
        })
        .reduce(function (moduleAlias, dir) {
          moduleAlias['@' + dir] = path.resolve(src, dir);
          return moduleAlias;
        }, moduleAlias);
    })(path.resolve(__dirname, '../src'))
  },
  plugins: [
    // 自动将入口js 文件插入到Html页面中。
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '..', 'src/index.html'),
    }),
    new ExtractTextPlugin('[name].css'),
  ],
}

1、css 相关：

需要用最新的 extract-text-webpack-plugin

$ npm i -D extract-text-webpack-plugin@next

2、JS 相关：

2.1、用 splitChunks 替换 CommonsChunkPlugin

module.exports = {
  mode: {...},
  entry: {...},
  output: {...},
  optimization: {
    minimize: true, // 压缩js，4.0 替换掉了 UglifyJsPlugin
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  },
  plugins: [...],
}

这些文章不错：
https://blog.zfanw.com/webpack-tutorial/
https://juejin.im/post/5b304f1f51882574c72f19b0?utm_source=gold_browser_extension

2.2、UglifyJsPlugin

$ npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

# webpack.conf.js
entry: { ... },
module: { ... },
plugins : [
# JS 代码丑化、混淆、压缩等功效，能有效的减小JS 文件的大小。
  new UglifyJsPlugin({
      uglifyOptions: {
        // 压缩优化
        compress: {
          warnings: false,
          keep_fargs: true,
          sequences: true,
          dead_code: true,
          conditionals: true,
          booleans: true,
          unused: true,
          if_return: true,
          join_vars: true,
          drop_console: true, // 剔除代码中的console.*
          drop_debugger: true, // 剔除代码中的 debugger
        }
      }
    }),
]