webpack从0开始搭建react的ts开发环境（13）

分出开发和生产（生产篇）
webpack从0开始搭建react的ts开发环境（12）
demo https://github.com/757566833/webpack-guide

0.介绍下生产模式需要的东西
webpack-bundle-analyzer ：打包生成后的文件分析工具
1.先安装插件

yarn add webpack-bundle-analyzer @types/webpack-bundle-analyzer   --dev

4.在webpack文件夹下新建webpack.prod.ts

import path from "path";
import webpack from "webpack";
import {BundleAnalyzerPlugin} from "webpack-bundle-analyzer";
import merge from "webpack-merge";
import common from "./webpack.common";
const config: webpack.Configuration = merge(common, {
    mode: "production",
    devtool: "source-map",
    plugins: [
        new BundleAnalyzerPlugin(),
    ],
});


export default config;

5.修改package.json

...
"scripts": {
    "test": "tsc",
    "webpack": "webpack",
    "start": "webpack-dev-server --config webpack/webpack.dev.ts",
    "build": "webpack --config webpack/webpack.prod.ts"
  }
...

webpack从0开始搭建react的ts开发环境（14）