从零使用webpack, less, typescript, react 构建项目 自己的npm

前言

🚩🚩🚩

一开始使用React写项目都是直接npx create-react-app name

但是要更好的理解npm包构建原理，能看懂别人的开源代码就要自己从头构建一个

本文使用webpack, less, typescript, react 构建项目

该项目为用hooks函数组件修改后的官方React教程中的井字棋

开始

需要下载 node.js 软件
创建项目目录并初始化

$ mkdir Develop-npm-from-zero
$ cd Develop-npm-from-zero
$ npm init

cmd执行命令后一直回车键或者输入你指定的值也可以 不影响

webpack环境安装配置

一、安装webpack

$ npm i --save-dev webpack webpack-cli html-webpack-plugin terser-webpack-plugin webpack-dev-server webpack-merge

二、创建 webpack 存放各种配置文件的目录

在项目根目录新建 webpack 文件夹 用来存放其配置文件

新建 webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js 文件

三、配置 webpack.base.config.js

暂时先配置 webpack.base.config.js 文件 使其可以运行

const path = require('path');
module.exports = {
  entry: path.join(__dirname, '../src/index.js'), // 入口文件，/src/index.js
}

四、配置 webpack.dev.config.js

const WebpackMerge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.config");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = WebpackMerge.merge(baseWebpackConfig, {
  // 指定构建环境
  mode: "development",
  plugins: [
    // 配置输出的HTML
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "public/index.html",
      inject: true
    }),
  ],
  // 开发环境本地启动的服务配置
  devtool: 'eval-source-map',
  devServer: {
    host: 'localhost',
    port: 3000,
    // 要求每次都返回HTML，不配置会出现can not GET/
    historyApiFallback: true,
    hot: true
  }
});

五、创建src文件夹

在项目根目录创建src文件夹，作为存放业务代码的地方

然后创建 index.js 文件，作为打包的入口文件

六、创建启动命令

在 package.json 的 scripts 中，创建命令：

• start 为本地开发启动的命令
• build 是打包项目的命令

{
    // ...
    "scripts": {
      "start": "webpack-dev-server --config webpack/webpack.dev.config.js --open",
      "build": "webpack --config webpack/webpack.prod.config.js",
      "test": "echo "Error: no test specified" && exit 1"
    }
    // ...
}

七、启动本地开发环境

$ npm start

安装配置 React环境

安装 React

$ npm install --save react react-dom

安装 babel

$ npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime-corejs3

• 在项目根目录创建 babel.config.js 文件，用来配置 babel

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  plugins: [ // 插件
    [
      '@babel/plugin-transform-runtime',
      {
        'corejs': 3
      }
    ],
  ]
}

• 修改 webpack 配置 使其使用 babel-loader 处理 JSX 语法
• 修改 webpack.base.config.js

const path = require('path');

const resolve = (link) => path.resolve(__dirname, link);
module.exports = {
  entry: path.join(__dirname, '../src/index.jsx'),
  module: { // 模块
    rules: [
      {
        test: /.jsx$/,
        use: [
          {
            loader: 'babel-loader', // 使用 babel-loader
          }
        ],
        include: [resolve('../src')],
        exclude: /node_modules/
      }
    ]
  }
}

• 修改 index.js 为 index.jsx，以JSX格式重写里面代

运行：

$ npm start

成功运行！

安装配置loader环境

安装各种 loader环境

$ npm install --save-dev css-loader style-loader url-loader post-loader less less-loader autoprefixer

• 重新配置 webpack.base.config.js文件

const path = require('path');

const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;
const resolve = (link) => path.resolve(__dirname, link);
module.exports = {
  entry: path.join(__dirname, '../src/index.jsx'),
  module: {
    rules: [
      {
        test: /.jsx$/,
        use: [
          {
            loader: 'babel-loader',
          }
        ],
        include: [resolve('../src')],
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          // 注意loader生效是从下往上的
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: lessRegex,
        exclude: lessModuleRegex,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'less-loader',
          },
        ]
      },
      {
        test: lessModuleRegex,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          {
            loader: 'less-loader',
          },
        ]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            //1024 == 1kb
            //小于10kb时打包成base64编码的图片否则单独打包成图片
            limit: 10240,
            name: path.join('img/[name].[hash:7].[ext]')
          }
        }]
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10240,
            name: path.join('font/[name].[hash:7].[ext]')
          }
        }]
      }
    ]
  }
}

（可选）

这里安装了 postcss-loader 作用是自动补全 css 前缀

需要配置 postcss-loader 使其生效

npm i -D postcss-loader
npm i -D autoprefixer

方法类似babel 在项目目录新建 postcss.config.js 写入代码

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

在 src 下新建 global.less并写入样式，然后在 index.jsx 中引入进行测试

import './global.less';

测试目前代码

$ npm start

项目运行成功且可以正常加载 .less 文件！

安装配置 typescript环境

安装 typescript

$ npm install --save typescript
$ npm install --save-dev @babel/preset-typescript @types/react

配置 typescript环境

• 修改 babel.config.js

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-typescript'
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        'corejs': 3
      }
    ],
  ]
}

• 修改 webpack.base.config.js

// ...
module.exports = {
    // ...
    module: {
        rules: [
            {
              test: /.(j|t)sx?$/,  //-------修改一
              use: [
                {
                  loader: 'babel-loader',
                }
              ],
              include: [resolve('../src')],
              exclude: /node_modules/
            }
            // ...
        ]
    },
    resolve: { //----------------------------修改二
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    }
}

• 添加 typescript 配置文件
• 新建 tsconfig.json 配置文件

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "esnext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],                                        /* Specify library files to be included in the compilation. */
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "sourceMap": true,                        /* Generates corresponding '.map' file. */
    "outDir": "./dist",                       /* Redirect output structure to the directory. */
    "isolatedModules": false,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitThis": true,                   /* Raise error on 'this' expressions with an implied 'any' type. */
    "noImplicitReturns": true,                /* Report error when not all code paths in function return a value. */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": ".",                       /* Base directory to resolve non-absolute module names. */
    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "experimentalDecorators": true,           /* Enables experimental support for ES7 decorators. */
    "paths": {

    }
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

关于 tsconfig.json 更多的配置说明

查看：https://www.tslang.cn/docs/handbook/tsconfig-json.html

到此 typescript的环境配置完成，可自行修改 src 下的文件为 tsx并重写来进行测试。

配置生产环境

修改 webpack/webpack.prod.config.js文件

const path = require('path');
const WebpackMerge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const baseWebpackConfig = require("./webpack.base.config");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = WebpackMerge.merge(baseWebpackConfig, {
  // 指定构建环境
  mode: "production",
  // 输出位置
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, './../dist'),
    chunkFilename: "[chunkhash:8].js"
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "public/index.html",
      inject: true, // true：默认值，script标签位于html文件的 body 底部
      hash: true, // 在打包的资源插入html会加上hash
      minify: {
        removeComments: true,               //去注释
        collapseWhitespace: true,           //压缩空格
        removeAttributeQuotes: true         //去除属性引用
      }
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false, // 不将注释提取到单独文件中
      })
    ]
  }
})

运行

$ npm run build

发现运行完毕会在根目录下产生 dist 文件夹格式如下

即为打包后的文件

现在可以直接运行 index.html

|-- dist
    |-- index.html
    |-- main.bundle.js

到此，已经完成了react + webpack +less+typescript 构建自己的项目的整个过程！

最终目录结构

|-- Develop-npm-from-zero
    |-- babel.config.js
    |-- package-lock.json
    |-- package.json
    |-- postcss.config.js
    |-- tsconfig.json
    |-- node_modules
    |-- dist
    |   |-- index.html
    |   |-- main.bundle.js
    |-- public
    |   |-- index.html
    |-- src
    |   |-- global.less
    |   |-- index.jsx
    |   |-- pages
    |       |-- Home
    |           |-- index.tsx
    |-- webpack
        |-- webpack.base.config.js
        |-- webpack.dev.config.js
        |-- webpack.prod.config.js

报错解决方法

Module not found: Error: Can t resolve postcss-loader xxx

npm -i install postcss-loader

Error: Cannot find module ‘clean-webpack-plugin’

npm -i install clean-webpack-plugin

Module not found: Error: Can’t resolve ‘react-dom/client’ in

原先的代码

......
import ReactDOM from 'react-dom/client';
......

......
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);
......

修改为

......
import ReactDom from 'react-dom';
......

......
ReactDom.render(<Game />,document.getElementById("root"));
......

参考

https://juejin.cn/post/7065518734433058847