webpack 配置参考

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack"); // 用于访问内置插件
// 由于output的path只支持绝对路径，所以需要引入path模块进行合并路径
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
  // 设置模式
  //development | production
  mode: "development",
  // devtool:"eval",
  // 设置source方便调试
  devtool: "source-map",
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    //设置js打包路径及名称
    filename: "js/bundle_[hash:6].js",
    //也可以在这里设置打包路径
    // assetModuleFilename: "img/[name]-[hash:6][ext]",
  },
  module: {
    rules: [
      // {
      //   test: /\.css$/, // 使用正则表达式对资源做匹配
      //   //1.loader的写法（语法糖）
      //   // loader: "css-loader",
      //   use: [
      //     //loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。
      //     {
      //       loader: "style-loader",
      //     },
      //     {
      //       loader: "css-loader",
      //       options: {},
      //     },
      //     {
      //       loader: "postcss-loader",
      //       options: {
      //         postcssOptions: {
      //           plugins: [require("autoprefixer")],
      //         },
      //       },
      //     },
      //   ],
      // },
      {
        test: /\.(less|css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              esModule: false, //解决生成多余文件问题
              importLoaders: 1,
            },
          },
          "postcss-loader",
          "less-loader",
        ],
      },
      // {
      //   test: /\.(png|jpeg|jpg|gif|svg)$/,
      //   use: [
      //     {
      //       loader: "url-loader",
      //       options: {
      //         // outputPath: "img",
      //         name: "img/[name]_[hash:6].[ext]",
      //         limit: 100 * 1024,
      //       },
      //     },
      //   ],
      // },
      {
        test: /\.(png|jpeg|jpg|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]",
        },
        parser: {
          // 设置转化为base64编码的大小限制
          dataUrlCondition: {
            maxSize: 100 * 1024,
          },
        },
      },
      //fileloader方式打包字体资源
      // {
      //   test: /\.(eot|ttf|woff2?)$/,
      //   use: [
      //     {
      //       loader: "file-loader",
      //       options: {
      //         // outputPath: "font",
      //         name: "font/[name]_[hash:6].[ext]",
      //       },
      //     },
      //   ],
      // },
      // asset module type方式打包字体资源
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html"),
      title: "test",
      options: {},
    }),
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      BASE_URL: "'./'",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          // to: "./",
          globOptions: {
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
  ],
};