Webpack (二) -- loader

?? 使用 TypeScript 编写配置文件

  ...
  "devDependencies": {
    "@types/node": "^16.0.0",
    "@types/webpack": "^5.28.0",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "^3.10.1",
    "typescript": "^4.3.5",
    "webpack": "^5.43.0",
    "webpack-cli": "^4.7.2"
  },
  ...

loader

loader 用于对模块的源代码进行转换。用于在 import 其他模块时与处理文件

配置

• exclude: 排除不需要转换的内容 (比如 node_modules)

特性s

• loader 支持链式调用，一个 loader 的返回值传递给下一个
• loader 可以是同步的，也可以是异步的
• loader 运行在 Node.js 中，并且能够执行任何可能的操作

使用 file-loader ts-loader css-loader style-loader

加载静态资源

?? webpack.config.ts 配置

import path from ‘path‘
import webpack from ‘webpack‘

const config: webpack.Configuration = {
  entry: {
    main: ‘./src/index.js‘,
  },

  output: {
    path: path.resolve(__dirname, ‘public‘),
    filename: ‘bundle.js‘,
  },

  module: {
    rules: [
      {
        test: /\.css/,
        use: [{ loader: ‘style-loader‘ }, { loader: ‘css-loader‘ }],
      },
      { test: /\.ts/, use: ‘ts-loader‘ },
      { test: /\.(png|svg|jpg|gif)$/, use: [‘file-loader‘] },
    ],
  },
}

export default config

Webpack (二) -- loader