0%

2022-01-21

发表于 更新于

安装依赖

这里的安装依赖特指安装 ts 依赖，使得 webpack.config.ts 能够被解析，且具有语法提示。

1
yarn add -D typescript ts-node @types/node @types/webpack

这样就可以使用 ts 编写 webpack 配置啦：

1
2
3
4
5
6
7
8
9
10
11
12
13
import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

export default config;

淦，没有成功

引入 .less 文件报错

找不到模块“./Nav.less”或其相应的类型声明

是由于 typescript 检测到没有该模块导致的：

  • 建议通过 yarn create @umijs/umi-app 初始化项目，自动包含 typings.d.ts

  • 或者在根目录手动添加 typings.d.ts

    1
    declare module "*.less";

这个 typings.d.ts 可以配置其他模块导入

配置多个 loader

网上有一种写法，写成数组形式，但是这样是错误的。

1
2
3
4
5
6
{
  test: /\.(le|c)ss$/,
  use: {
    loader: ['css-loader','less-loader']
  }
}

configuration.module.rules[3].use.loader should be a non-empty string.

真正的写法也是使用数组，当然不是像上面一样，而是 use 是一个数组，其实这位针对每个 use 元素做具体操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  // ...
  use: [
    {
      loader: "css-loader",
    },
    {
      loader: "less-loader",
    },
  ];
}

// 或者这样写，在不需要其他配置的情况下可以这样简写
{
  // ...
  use: ["css-loader", "less-loader"];
}

样式配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[local]--[hash:base64:5]", // 如果没有这个标识，则生成乱码无法查看
              },
            },
          },
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
  // ...
};

postcss 怎么配置？？？

解析 HTML

1
2
3
4
5
6
7
8
9
10
11
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  // ...
  plugins: [
    new HtmlWebPackPlugin({
      title: "react app",
      filename: "index.html",
      template: "./public/index.html",
    }),
  ],
};