从头搭建react + webpack + typescript

从头搭建react + webpack + typescript

1. 创建项目，安装依赖

在项目根目录下执行

// 生成package.json文件
npm init -y

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

安装babel

如果你用过 babel 6，可能要问，怎么不是 npm i babel-core -D？@ 符号又是什么？这是 babel 7 的一大调整，原来的 babel-xx 包统一迁移到babel 域下 - 域由 @ 符号来标识，一来便于区别官方与非官方的包，二来避免可能的包命名冲突。

处理JSX语言

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

处理ES6语言

npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -S

配置babel

项目根目录新建 .babelrc文件

// presets项，不想自己动手组合插件？没问题！preset 可以作为 Babel 插件的组合，甚至可以作为可以共享的 options 配置。
// plugins项，引用插件来处理代码的转换
// transform-runtime用来处理全局函数和优化babel编译

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-transform-runtime"]
}

webpack配置

npm i webpack --save-dev
npm install --save-dev webpack-dev-server
npm install --save-dev webpack-cli

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中

npm install --save-dev html-webpack-plugin
// webpack.config.js中添加代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
 plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    })
  ], // 添加插件
};

添加css-loader style-loader

npm i style-loader css-loader ts-loader -D

根目录新建webpack.config.js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: { app: './src/index.tsx' },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      { test: /\.tsx?$/, use: "ts-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    })
  ],
  devtool: 'inline-source-map',
  devServer: {
    open: true,
  },
}

添加asset资源模块（处理图片，字体等资源）— webpack5中内置

/**
 * 
 * 1. asset/rosurce  相当于 file-loader
 * 2. asset/inline 相当于 url-loader
 * 3. asset 相当于以上的合并
 */
 // 添加
{
        test: /\.(png|jpg|svg|jpeg)$/,
        type: 'asset',
        generator: {
          filename: 'img/[name].[hash:4][ext]'
        },
        // 小于maxSize以二进制的形式显示
        parser: {
          dataUrlCondition: {
            maxSize: 30 * 1024
          }
        }
 }

配置typescript

npm i typescript -D

项目根目录下，创建tsconfig.json文件

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    // "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    //esModuleInterop选项的作用是支持使用import d from 'cjs'的方式引入commonjs包
    "esModuleInterop": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./src/**/*",
   "images.d.ts"
  ]
}

cross-env配置命令

npm i cross-env -D

在package.json中的scripts里添加

 "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

运行

npm run start