1、初始化项目init

    mkdir webpack-demo
    cd webpack-demo
    npm init

2、安装打包三件套

npm i webpack webpack-dev-server webpack-cli -D

创建好 webpack.config.js 配置文件源代码文件 src/index.js

配置start、build命令

// package.json
"scripts": {
    "start": "cross-env NODE_ENV=development webpack server",
    "build": "cross-env NODE_ENV=production webpack"
  },

tip：cross-env不懂看 => juejin.cn/post/698981…

tip：当前webpack5，start使用 webpack-dev-server, 会报版本兼容问题， webpack server为官方解决方案，也可以降版本解决。

使用了 cross-env

    npm i cross-env -D

配置 webpack.config.js

// webpack.config.js
const path = require("path");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, ""),
  },
};

然后 npm start

好了打开 http://localhost:8080/ 看到了希望

3、我想看到Hello, world!

react上场

npm i react react-dom

src/index.js => src/index.jsx

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));

需要个插件（html-webpack-plugin）生成一个 HTML5 文件

npm i --save-dev html-webpack-plugin

该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 打包生成的 bundle，但是你看不到，放在内存中，配置如下所示：

  // webpack.config.js
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"), //指定模板页面
      // filename: "index.html", //打包生成页面的名称，默认index.html
    }),
  ],

tip: 在src下创建与HtmlWebpackPlugin关联的template=>index.html，并创建挂载react根元素的dom id="root"

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2">
  <title>demo</title>

</head>
<body>
  <div id="root"></div>
</body>
</html>

配置解析jsx的 loader

npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D

在module中配置 loader

  // webpack.config.js
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, "./src"),
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
          },
        },
      },
    ],
  },

运行npm start

4、配置Ts

    npm install typescript ts-loader -D

配置tsconfig.json

    // tsconfig.json
    {
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查。
    "noFallthroughCasesInSwitch": true, // 报告switch语句的fallthrough错误。（即，不允许switch的case语句贯穿）
    // "sourceMap": true, //生成相应的 .map文件。
    "noUnusedParameters": true,//若有未使用的参数则抛错。
    "noImplicitReturns": true,//	不是函数的所有返回路径都有返回值时报错。
    "moduleResolution": "node",//决定如何处理模块
    "esModuleInterop": true,
    "noUnusedLocals": true,//若有未使用的局部变量则抛错。
    "noImplicitAny": true,//在表达式和声明上有隐含的 any类型时报错。
    "target": "es2015",//指定ECMAScript目标版本 
    "module": "es2015",//指定生成哪个模块代码
    "strict": true,// 启用所有严格类型检查选项。
    "jsx": "react",//在 .tsx文件里支持JSX
    "allowJs": true,
    "noEmit": false,
    "outDir": "./dist/",
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"],
    },
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/**",
    "dist/*",
  ],
}

根据个人需求，自行配置 www.tslang.cn/docs/handbo…

配置解析tsx的loader

// webpack.config.js
    {
        test: /\.tsx?$/,
        use: "ts-loader",
        include: path.resolve(__dirname, "./src"),
    },

将对应文件的后缀改为tsx index.jsx => index.tsx

修改入口路径

// webpack.config.js
  entry: {
    app: "./src/index.tsx",
  },

打开index.tsx将会有ts报错，则ts生效

根据提示需要安装 react @type

    npm i @types/react-dom @types/react -D

然后npm star 可以正常运行，有报错自行查看报错信息。

5、配置热更新

配置devServer

// webpack.config.js
  devServer: {
    host: "0.0.0.0",
    port: 9000,
    inline: true,
    open: true,
    hot: true,
    historyApiFallback: true,
    headers: {
      "cache-control": "no-cache",
      pragma: "no-cache",
    },
    proxy: {},
  },

详细配置查看官网 webpack.docschina.org/configurati…

hot: true 开启热更新,要完全启用，需要开启HMR => HotModuleReplacementPlugin 启用 HMR 很容易，且在大多数情况下不需要任何配置。

// webpack.config.js
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"), //指定模板页面
      // filename: "index.html", //打包生成页面的名称，默认index.html
    }),
    !isProd && new webpack.HotModuleReplacementPlugin(), // 启用 HMR
  ],

重新 npm start 内容改变，页面不刷新，且改变。

控制台显示一些更新成功信息配置完成

6、完整代码

github.com/dengruifeng…

下篇 react+ts白手起家建个属于自己的项目（二应用篇）完善路由、less、代码规范、开发规范等

react+ts白手起家建个属于自己的项目（一 练手篇）