webpack配置react+ts项目+webpack优化

前端_刘师兄
866 阅读2分钟

环境

当前版本：

node: 14.16.1
npm: 7.6.1
yarn: 1.22.11
webpack: 5.69.1
webpack-cli: 4.9.2
webpack-dev-server: 7.4.4

要求：需要安装 Node.js，使用node.js自带的npm安装yarn

安装命令

npm install -g yarn
yarn -v

配置环境变量

点击鼠标右键选择电脑属性

1645432534(1).jpg

一般yarn的安装位置：

C:\Users\XXX\AppData\Roaming\npm\node_modules\yarn\bin

（XXX为当前电脑的用户名）

安装、配置 webpack

初始化packge.json、安装webpack：

  • 初始化当前的环境，安装webpack及webpack的脚手架
yarn init -y
yarn add webpack webpack-cli -D

添加需要打包的文件： src/index.js （新增）

  • 当前的基础文件
console.log('hello webpack');

添加配置文件： webpack.config.js （新增）

  • 开始配置webpack文件
const path = require('path');

module.exports = {
  entry: {
    app: './src/index.js',  // 文件入口
  },
  output: {
    path: path.resolve(__dirname, './dist'),  // 文件出口
    filename: '[name].bundle.js',   // 出口文件名
  }
}

添加打包命令: package.json （修改）

  • 添加打包的命令
  "scripts": {
    "build": "webpack"
  },

运行文件命令：

  • 查看打包命令是否生效，配置有无错误
yarn run build

PS： 成功运行命令则目录下会新增 dist/app.bundle.js

开始配置html

添加插件： html-webpack-plugin

  • 添加打包html的插件
yarn add html-webpack-plugin -D

修改配置文件：webpack.config.js

  • 将打包html的插件配置到webpack
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 /* ... */
 plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack配置',
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    }),
  ],
}

新建: index.html

  • 建立基础的html文档，以便提供webpack打包使用
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

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

</html>

运行命令：

  • 查看配置是否有误
yarn run build

PS: 这个时候运行命令再dist文件夹下会出现 index.html

添加Babel

安装依赖：

yarn add babel-loader @babel/core @babel/preset-env -D

添加babel配置：babel.config.json

{
  "presets": ["@babel/preset-env"]
}

安装loader

安装命令：

yarn add css-loader style-loader less-loader -D

添加配置：webpack.config.js

module.exports = {
    /* ... */
  module: {
       /* ... */
      rules: [
           /* ... */
        {
        test: /\.css$/,
        exclude: /node_modules/,
        use: {
          loader: 'css-loader',
        },
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
       },
    ],
  },
}

配置开发环境

添加插件： webpack-dev-server

yarn add webpack-dev-server -D

添加配置：webpack.config.js

module.exports = {
    mode: 'development',
    /* ... */
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        publicPath: '/'
      },
    /* ... */
    devServer: {
        historyApiFallback: true,
        hot: true,
        port: 3000,
      },
}

添加Reac和支持TypeScript

安装依赖:

yarn add react react-dom typescript ts-loader @types/react @types/react-dom

修改后缀名： src/index.js --> src/index.jsx

添加TypeScript配置文件: tsconfig.json

  • 新建单独配置TS的文件
{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "esModuleInterop": true,
    "allowJs": true,
    "strict": true
  }
}

修改配置文件：webpack.config.js

  • 引入配置TS的loader并修改入口文件的后缀名
/* ... */
module.exports = {
  /* ... */
  entry: {
    app: './src/index.tsx',
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  },
   /* ... */
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
       },
       /* ... */
    ],
  },
}

运行命令:

yarn run start

PS： 正常启动的话就可以访问 http://localhost:3000

优化

1. development

添加配置： webpack.config.js

  • 追踪代码报错的位置
module.exports = {
    mode: 'development', 
     /* ... */
}

2. 清理打包目录

添加插件： clean-webpack-plugin

  • 添加打包前清理打包目录的插件
yarn add clean-webpack-plugin -D

添加配置： webpack.config.js

   /* ... */
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
     /* ... */
     plugins: [
        new CleanWebpackPlugin(),
        /* ... */
      ],
}

3. 代码提示

添加代码提示插件： friendly-errors-webpack-plugin

  • 添加代码提示的插件
yarn add friendly-errors-webpack-plugin

添加配置： webpack.config.js

   /* ... */
const friendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
     /* ... */
     plugins: [
        new friendlyErrorsWebpackPlugin(),
        /* ... */
      ],
}

4. 模块打包时间展示

添加模块打包时间展示的插件: speed-measure-webpack-plugin

yarn add speed-measure-webpack-plugin

添加配置： webpack.config.js

  • 将之前的配置声明成一个常量,使用 speed-measure-webpack-plugin 的 wrap 方法 将配置作为参数传入
  • 该插件可以看到模块打包的耗时,可以针对该模块做一些webpack的优化
   /* ... */
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

const config = { /* ... */}

module.exports = smp.wrap(config);
  • 重启项目后终端会出现项目打包耗时

image.png

5. 指定和排除转译文件

指定和排除转译文件: include(指定)/exclude(排除)

   /* ... */
const config = {
    /* ... */
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
            include: [path.resolve(__dirname, 'src')]
          },
         /* ... */
         ]
     }
}

module.exports = smp.wrap(config);
  • 重启项目后可以看到比之前快了2s (我的示范项目里面基本是以tsx的文件)

image.png

6. 添加缓存

添加缓存: cache-loader

   /* ... */
const config = {
    /* ... */
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: ['cache-loader', 'ts-loader'],
            exclude: /node_modules/,
            include: [path.resolve(__dirname, 'src')]
          },
         /* ... */
         ]
     }
}

module.exports = smp.wrap(config);
  • 从打包上面可以看出我的项目里面对 TS 部分的打包较慢,所以我将cahe-loder添加到了 解析 tsx 的loader配置上,第二次打包明显快了 2s

image.png

7. 多核打包

多核打包: happypack

  • 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程
  • 基本用法:
    1. 需要单独配置 postcss.config.js
    module.exports = {
  plugins: [
      require('autoprefixer')()
  ]
}
    1. 配置webpack
    /* ... */
const Happypack = require('happypack');
const config = {
/* ... */
  plugins: [
    new Happypack({
      id: 'tsx',
      use: ['ts-loader'],
    }),
    new Happypack({
      id: 'less',//和rule中的id=css对应
      use: [
        'style-loader',
        'css-loader',
        'less-loader'
      ],
    }),
],
  module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: 'Happypack/loader?id=tsx',
            exclude: /node_modules/,
            include: [path.resolve(__dirname, 'src')]
          },{
            test: /\.less?$/,
            use: 'Happypack/loader?id=less',
            exclude: /node_modules/,
            include: [path.resolve(__dirname, 'src')]
          },
         /* ... */
         ]
     }
}
module.exports = smp.wrap(config);

8. thread-loader

  • 与 happypack 的效果差不多，配置比较简单
yarn add thread-loader -D

   /* ... */
const config = {
    /* ... */
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: ['thread-loader','cache-loader', 'ts-loader'],
            exclude: /node_modules/,
            include: [path.resolve(__dirname, 'src')]
          },
         /* ... */
          {
            test: /\.less?$/,
            use: ['thread-loader','style-loader','less-loader', 'css-loader'],
            exclude: /node_modules/,
            include: [path.resolve(__dirname, 'src')]
          },
         ]
     }
}

module.exports = smp.wrap(config);

PS

觉得有帮助的就在右上角点个赞呗！！！有问题在评论区见！！！ ----> 与我联系

avatar
文章
阅读
粉丝