初始化

先初始化项目

1	yarn init -y

运行命令初始化 package.json 文件。

安装 webpack 和 webpack-cli。

1	yarn add webpack webpack-cli -D

进行 ts 配置

1	tsc --init

修改 tsconfig.json，使用 create-react-app 的设置：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

在根目录下新建文件夹 config，书写配置信息。

// config/webpack.common.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/index.tsx",
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              esModule: false,
            },
          },
          "postcss-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              esModule: false,
            },
          },
          "postcss-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.tsx?$/i,
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|gif|jpe?g)$/i,
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 25 * 1024,
          },
        },
      },
      {
        test: /\.(ttf|woff2?)$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]",
        },
      },
      {
        test: /\.jsx?$/i,
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Webpack Learning",
      template: "./public/index.html",
    }),
    new DefinePlugin({
      BASE_URL: '"./"',
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          globOptions: {
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
  ],
};

// config/webpack.dev.js
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const { merge } = require("webpack-merge");
const common = require("./webpack.common");

module.exports = merge(common, {
  mode: "development",
  devtool: "source-map",
  devServer: {
    hot: true,
    port: 3000,
    compress: true,
    open: true,
  },
  plugins: [new ReactRefreshWebpackPlugin()],
});

// config/webpack.prod.js
const path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common");

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "../dist"),
    clean: true,
  },
});

安装 react

1	yarn add react react-dom

安装 ts 依赖

1	yarn add @types/react @types/react-dom -D

安装 babel 相关依赖

1	yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react @babel/preset-typescript -D

根目录新建文件 babel.config.js，内容如下：

const isDev = process.env.NODE_ENV !== "production";

const config = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
        corejs: 3,
      },
    ],
    ["@babel/preset-react"],
    ["@babel/preset-typescript"],
  ],
};

if (isDev) {
  config.plugins = [["react-refresh/babel"]];
}

module.exports = config;

安装 loader

1	yarn add sass sass-loader css-loader postcss-loader postcss style-loader babel-loader -D

安装 plugin

1	yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh copy-webpack-plugin html-webpack-plugin -D

安装 postcss 依赖

1	yarn add postcss-preset-env autoprefixer -D

新建文件 postcss.config.js：

1
2
3

module.exports = {
  plugins: [require("autoprefixer"), require("postcss-preset-env")],
};

添加 browserslist

给 package.json 添加 browserslist。

"browserslist": [
  ">1%",
  "last 2 version",
  "not dead"
]

安装 webpack-dev-server

1	yarn add webpack-dev-server -D

安装 webpack-merge

1	yarn add webpack-merge -D

安装 cross-env

1	yarn add cross-env -D

配置脚本命令

"scripts": {
  "build": "cross-env NODE_ENV=production npx webpack --config ./config/webpack.prod.js",
  "start": "cross-env NODE_ENV=development npx webpack serve --config ./config/webpack.dev.js"
}

My Front End Blog

使用 Webpack 从零打造 React 开发环境

初始化