老师html-webpack-plugin打包报错

Question

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

module.exports = {
  // 模式 production | development | none , 默认是production
  mode: 'development',
  // 此写法是下面注释写法的简写 , 实际上就是对main的简写
  entry: './src/main.js',
  // entry: {
  //   main: './src/main.js' 
  // },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    /*
      loader有两个属性:
        1、test: 用于标识出应该被对应的 loader 进行转换的某个或某些文件。
        2、use: 表示进行转换时，应该使用哪个 loader。

      loader的执行顺序是从下到上,从右到左
    */
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          // {
          //   loader: 'file-loader',
          //   options: {
          //     name: '[name]-[hash].[ext]',
          //     outputPath: 'assets'
          //   }
          // },
          {
            // url-loader 与 file-loader 类似, 但如果文件小于配置中limit的字节限制 webpack 会将图片打包在输出的js中(以DataURL形式)
            // 好处: 当字节太小的图片打包在js中 可以减少http请求 提升页面加载速度
            loader: 'url-loader', // dang
            options: {
              name: '[name]-[hash].[ext]',
              outputPath: 'assets',
              limit: 2048  // 如果文件小于该配置(单位:字节), 会使用url-loader 否则默认使用 file-loader
            }
          }
        ]
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // 通过 @import 引入的css、scss等文件,在引入之前应用几个loader
              // 默认为0 
              // 0 => no loaders (default);   1 => postcss-loader;   2 => postcss-loader, sass-loader
              importLoaders: 2,
              modules: false,  // 启用css样式模块化   相当于vue中 style 标签的 scope 属性
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
      },
      // 打包图标字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
            outputPath: 'font'
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

这是什么问题？我重新装了webpack 和 webpack-cli也没有用

Answer 1

Dell 2021-05-19 21:52:06

node_modules 全部删了，重新安装。另外你看看本地的webpack版本是多少

• 提问者 weixin_慕粉6116347 #1

  非常感谢！

• 慕盖茨8557236 #2

  老师，我这也是报错，重新安装了webpack  webpack-cli。还有mode_modules也不行，版本和上面这个同学的一样

• Dell 回复 慕盖茨8557236 #3

  是webpack 5 吗

点开查看后面1条评论