web 5配置

Question

最近，我更新了我所有的依赖项，包括(Webpack 4.44 -> Webpack 5.69，react -router 5 -> react router dom 6和react 16 -> react 17)。

我试图配置webpack，但我遇到了一些错误，我无法弄清楚。我要提到的是，我正在尝试使用webpack 5的资产模块来替换我的旧加载程序(url-加载器、img-加载程序和文件加载程序)。

但是我得到了以下错误

/Users/shahid.ahmad/src/assets/favicon-32.ico: Html插件:错误:子编译失败:模块构建失败(来自./node_node/babel-

/lib/index.js)：SyntaxError: SyntaxError意外字符‘。(1:0)

同时我也得到了这个

在资产asset/resource|/Users/shahid.ahmad/node_modules/babel-loader/lib/index.js!/Users/shahid.ahmad/src/assets/favicon-32.ico的呈现过程中无法读取未定义属性的

ChunkRenderError

还有这个

./src/

//FuturaPT-Demi.otfModuleBuild中的错误(来自./node_/babel-/lib/index.js)：SyntaxError: SyntaxError意外字符'‘。(1:4)

这就是webpack配置的样子。

​

const path = require('path');
const HTML = require('html-webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs');

module.exports = (env = {}) => {
  
  const currentPath = path.join(__dirname);
  
  const basePath = `${currentPath}/.env`;
  
  const envPath = env.environment ? `${basePath}.${env.environment}` : basePath;
  
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;
  
  const fileEnv = dotenv.config({ path: finalPath }).parsed;
  
  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
  
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    mode: env.production ? 'production' : 'development',
    entry:  { 
      application : './src/index.tsx' 
    },
    devtool: env.production ? false : 'source-map',
    cache:{
      type : 'filesystem'
    },
    module: {
      rules: [
        {
          test: /.(mjs)?$/,
          resolve: {
            fullySpecified: false, 
          },
        },        
        {
          test: /.(js|jsx|ts|tsx)?$/,
          exclude: /node_modules/,
          use: [{
            loader : 'babel-loader'
          }],
        },
        {
          enforce: 'pre',
          exclude: /node_modules/,
          test: /\.js$/,
          loader: 'source-map-loader',
        },
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
          type: 'asset/resource',
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/inline',
        },
        {
          test: /\.(html)$/,
          use: {
            loader: 'html-loader',
          },
        },
        {
          test: /\.(css)$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    resolve: {
      extensions: ['*', '.mjs', '.js', '.jsx', '.scss', '.css', '.html', '.ts', '.tsx'],
      modules: [path.resolve(__dirname, '.'), 'node_modules'],
    },
    output: {
      path: path.join(__dirname, '/dist'),
      publicPath: '/',      
      chunkFilename: '[name].[chunkhash].js',
    },
    devServer: {            
      historyApiFallback: true,
      open: true,
      compress: true,
      hot: true,            
    },
    plugins: [
      new HTML({
        template: './src/template.html',
        inject: true,
        hash: true,
      }),
      new webpack.DefinePlugin(envKeys),
    ],
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        minChunks: 1,
        cacheGroups: {
          defatulVendor: {
            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
            name: 'vendor',
            chunks: 'all',
          },
        },
      },
    },
  };
};

​

我读了很多书，但仍然找不出问题的所在。任何帮助都将不胜感激，谢谢。

Answer 1

我认为您的构建失败是因为您没有为.ico文件类型指定加载程序。

考虑为它和其他静态资源指定一个加载程序，并更新regex以包含它。

- test: /\.(png|svg|jpg|jpeg|gif)$/i,
+ test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,