构建步骤

初始化

npm 初始化 npm init
git初始化状态git init
创建项目结构
- 根目录下创建src文件夹、public文件夹
- 根目录下创建.npmrc文件，内容registry=https://registry.npmmirror.com
- 根目录下创建 tsconfig.json文件
- 根目录下创建 index.html文件

配置 `webpack`

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容

安装webpack与webpack-cli
根目录下创建webpack.config.js

入口起点（webpack打包的入口）

module.exports = {
    entry: "./src/index.js"
}

打包输出

module.exports = {
    ...
    output: {
    filename: 'js/[name][hash][ext].js',          // js打包到JS文件夹下
    path: path.resolve(__dirname, "dist"),        // 打包后的文件输出目录
    asyncChunks: true, // 创建按需加载的异步 chunk。
    assetModuleFilename: 'images/[hash][ext][query]',   // 图片打包到images下
    clean: true, // 清空上次打包内容
  }
}

配置css-loader

如果我们要加载一个css文件，需要安装配置style-loader和css-loader

安装css-loader与其相关依赖:npm i style-loader css-loader -D

增加CSS前缀postcss安装依赖npm i postcss postcss-loader postcss-preset-env -D

const handlerCSSLoader = {
  loader: "css-loader",
  options: {
    modules: true,        // CSS Modules
    importLoaders: 1,
  },
};
const handlerPostcssLoader = {
  loader: "postcss-loader",
  options: {
    postcssOptions: {
      config: false,
      plugins: [
        [
          "postcss-preset-env",
          {
            stage: 0,
          },
        ],
      ],
    },
  },
}

{
    test: /\.css$/,   // 正则匹配以.css结尾的文件
    // 当使用多个loader处理模块时，use为数组格式，并且loader的执行顺序为从下到上，从后往前
    use: [
         // 将 JS 字符串生成为 style 节点
        "style-loader",
        // 将 CSS 转化成 CommonJS 模块
        handlerCSSLoader,
        handlerPostcssLoader
    ]
  }

配置SASS

CSS扩展语言

安装sass-loader及其依赖包npm i sass sass-loader -D

{
        test: /\.s[ac]ss$/,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          handlerCSSLoader,
          // 增加前缀
          handlerPostcssLoader,
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
        include: path.resolve(__dirname, 'src') // 包含哪些文件
      }

提取css到单独的文件

安装插件mini-css-extract-plugin npm i mini-css-extract-plugin -D

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  ...
  plugins: [new MiniCssExtractPlugin({
      filename: 'css/[name].css',      // css抽取到css文件夹下
      chunkFilename: '[id].[hash].css'
    })],
};

生成html文件,把打包的js, css放进html中

安装html-webpack-plugin插件npm i html-webpack-plugin -D

...
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  ...
  plugins: [new HtmlWebpackPlugin({ template: "index.html" })],
};

支持react

安装 npm install react react-dom
安装解析依赖 npm i babel-loader @babel/preset-env
解析jsx与js高级语法

{
        test: /\.(js|jsx)$/, // 设置所匹配要解析的文件
        use: {
          loader: "babel-loader", // 使用的loader
          options: {
            // loader的配置
            presets: [
              // 设置预设
              [
                "@babel/preset-env",
                {
                  // 高级语法解析预设
                  // useBuiltIns 有三个值
                  // false：不对polyfill做操作。
                  // entry：根据配置的浏览器兼容, 引入浏览器不兼容的 polyfill。需要在入口处手动引入polyfill
                  // usage：根据配置的浏览器兼容,及代码中使用到的高级语法按需求引入polyfill
                  useBuiltIns: "usage",
                  corejs: 3, // core-js的使用版本
                },
              ],
            ],
          },
        },
        exclude: /node_modules/,
      }

支持`tsx`和`ts`

npm install @types/react @types/react-dom --save-dev

更新webpack.config.js

...
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/, // 设置所匹配要解析的文件
        use: {
          loader: "babel-loader", // 使用的loader
          options: {
            // loader的配置
            presets: [
              // 设置预设
              [
                "@babel/preset-env",
                {
                  // 高级语法解析预设
                  // useBuiltIns 有三个值
                  // false：不对polyfill做操作。
                  // entry：根据配置的浏览器兼容, 引入浏览器不兼容的 polyfill。需要在入口处手动引入polyfill
                  // usage：根据配置的浏览器兼容,及代码中使用到的高级语法按需求引入polyfill
                  useBuiltIns: "usage",
                  corejs: 3, // core-js的使用版本
                },
              ],
              "@babel/preset-react", // 解析
            ],
          },
        },
        exclude: /node_modules/,
      },
      ...
    ],
  },
};

配置tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "esModuleInterop": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "CommonJS",
    "target": "ES5"
  },
  "include": ["./src/**/*", "src/index.js"]
}

支持图片

配置

{
     test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
     type: 'asset',
}

类型定义
- 根目录下创建env.d.ts
- 声明declare module '*.png'
- tsconfig.json中包含"include": ["./env.d.ts", "./src/**/*", "src/index.js"]

配置`package.json`的`scripts`

"scripts": {
    "build": "webpack --config ./webpack.config.js",
    "dev": "webpack serve"
  },

配置`devServer`

devServer: {
    host: '0.0.0.0',
    // hot: true,            // 热更新
    port: 1000,
    open: true,           // 服务器已经启动后打开浏览器
}

webapck5打包react