React项目的webpack配置（基础通用版）

一个合格的前端开发者必须夯实基础，深入地理解所使用的技术，而不是浮于表面，保持“够用就行”的技术认知。
Vue CLI 或者 create-react-app 这样高度集成的 CLI 工具，目的是降低开发者的使用成本，但因为这种“黑盒工具”大多数采用的都是通用的配置，而优秀的开发人员应该学会“因地制宜”，根据实际情况更灵活地去使用每一个工具。

下面是我认为只要是React项目， webpack 基本上都会有配置上的功能（配置了打包过程优化、资源代码分块、Tree-shaking 等这类功能），像less，sass这些因人而异的 loader 就没有进行引入配置（所以叫基础版，可以因人而异往上加或修改）

如果想要了解熟悉webpack，最好的方式就是自己动手按照指南上走一遍（提醒：wbpack中文文档中的指南有些内容过时了，观看最新内容可以到英文官网），然后把概念过一遍。

公用基本配置的功能：

• 预处理css，图片，字体
• 配置babel来转义 jsx 和 es6 语法
• 自动生成 HTML 文件

webpack.common.js

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

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.ejs' }) //就是把你的html后缀改成ejs就好了
    ],
};

开发环境配置的功能：

• 一个简单的开发服务器
• 启动模块热替换(Hot Module Replacement)
• 源代码错误定位

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    mode: 'development'
});

生产环境配置的功能：

• 编译构建前清空 /dist 文件夹
• 压缩代码，删除未引用代码（tree shaking）
• 启用 library 针对用户环境进行的代码优化
• 编译hash值文件（解决浏览器缓存问题）
• 代码拆分，提取公用代码

webpack.prod.js

const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(common, {
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                    name: 'vendor',
                    chunks: 'all',
                }
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
    ],
    mode: 'production',
});

package.json

上面用的一些 npm 包和 scripts 的设置

{
  //......
  "dependencies": {
  //......
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "babel-loader": "^8.0.0-beta.0",
    "lodash": "^4.17.15",
    "webpack": "^4.43.0"
  },
  "devDependencies": {
  //......
    "@babel/preset-react": "^7.10.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.1.3",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  //......
}