青山不落魄 2023-03-03 22:56 采纳率: 100%
浏览 23
已结题

Webpack5打包时遇见模板文件index.html冲突

Webpack5打包时遇见模板文件index.html冲突

问题描述

事情是这样的,最近这在自行搭建react加typescript开发环境,使用到的webpack版本是5.75.0。前面的步骤还是没有什么问题的,区分了开发与生产环境,但是之后在public文件下公共静态资源的打包时遇见了一个问题,public文件夹下面的favicon.ico文件并没有打包到指定的打包路径,因此想到了使用webpack插件copy-webpack-plugin进行静态资源的复制,这一部分插件的配置是在webpack.common.js中。原本按照设想是没有问题的,但是,实际上却出问题了。以下为报错提示:

ERROR in ./src/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Unknown option: .plungins. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
    at validate (H:\vscodeworkstation\react_app\lush-blog-frontend\node_modules\@babel\core\lib\config\validation\options.js:86:25)
    at H:\vscodeworkstation\react_app\lush-blog-frontend\node_modules\@babel\core\lib\config\config-chain.js:170:34
    at cachedFunction (H:\vscodeworkstation\react_app\lush-blog-frontend\node_modules\@babel\core\lib\config\caching.js:48:27)
    at cachedFunction.next (<anonymous>)
    at evaluateSync (H:\vscodeworkstation\react_app\lush-blog-frontend\node_modules\gensync\index.js:251:28)
    at sync (H:\vscodeworkstation\react_app\lush-blog-frontend\node_modules\gensync\index.js:89:14)
    at buildRootChain (H:\vscodeworkstation\react_app\lush-blog-frontend\node_modules\@babel\core\lib\config\config-chain.js:107:31)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (H:\vscodeworkstation\react_app\lush-blog-frontend\node_modules\@babel\core\lib\config\partial.js:79:62)
    at loadPrivatePartialConfig.next (<anonymous>)

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

前置分析

下面贴出部分我认为有问题的webpack配置

module.exports = {
  // 其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(PROJECT_PATH, './public/index.html'),
      filename: 'index.html',
      cache: false,
      minify: isDev
        ? false
        : {
            removeAttributeQuotes: true,
            collapseWhitespace: true,
            removeComments: true,
            collapseBooleanAttributes: true,
            collapseInlineTagWhitespace: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            minifyCSS: true,
            minifyJS: true,
            minifyURLs: true,
            useShortDoctype: true,
          },
    }),
    new CopyPlugin({
      patterns: [
        {
          context: resolve(PROJECT_PATH, './public'),
          from: '*',
          to: resolve(PROJECT_PATH, './dist'),
          toType: 'dir',
        },
      ],
    }),
  ],
}

按照报错分析,应该是在进行打包的过程中,有多个插件尝试修改index.html,导致了冲突发生。对于html-webpack-plugin来说,会将打包后的js文件引入到index.html中并输出到打包路径dist,同时对于copy-webpack-plugin来说,其同时复制了public下面的index.html到打包路径下,这样就产生了冲突。


笔者前端开发掌握的不太好,对于插件`copy-webpack-plugin`不太熟悉,望在座各位能够不吝赐教
  • 写回答

1条回答 默认 最新

  • 「已注销」 2023-03-03 23:13
    关注

    “Devil组”引证GPT后的撰写:

    • 你的分析基本上是正确的。copy-webpack-plugin插件将public文件夹下的所有文件复制到打包输出目录,包括index.html文件。而html-webpack-plugin插件在打包时会使用模板文件index.html,根据配置自动生成最终的index.html文件并将其输出到打包目录。
    • 因此,copy-webpack-plugin和html-webpack-plugin都会尝试将index.html文件输出到打包目录中,造成了冲突。

    解决方法有两种:

    1.不使用copy-webpack-plugin插件复制public文件夹下的index.html文件,而是直接在src目录下创建一个index.html文件,作为html-webpack-plugin的模板文件。这样就避免了两个插件都尝试输出index.html文件的问题。修改html-webpack-plugin插件配置如下:

    plugins: [
      new HtmlWebpackPlugin({
        template: resolve(PROJECT_PATH, './src/index.html'),
        filename: 'index.html',
        // ...
      }),
      // ...
    ]
    
    
    

    2.在使用copy-webpack-plugin插件时,排除public文件夹下的index.html文件。修改copy-webpack-plugin插件配置如下:

    plugins: [
      new HtmlWebpackPlugin({
        template: resolve(PROJECT_PATH, './public/index.html'),
        filename: 'index.html',
        // ...
      }),
      new CopyPlugin({
        patterns: [
          {
            context: resolve(PROJECT_PATH, './public'),
            from: '*',
            to: resolve(PROJECT_PATH, './dist'),
            toType: 'dir',
            globOptions: {
              ignore: ['**/index.html'],
            },
          },
        ],
      }),
      // ...
    ]
    
    
    

    这样,copy-webpack-plugin插件就不会复制public文件夹下的index.html文件,而是只复制其他文件。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月11日
  • 已采纳回答 3月3日
  • 创建了问题 3月3日

悬赏问题

  • ¥15 编写vba代码实现数据录入工作
  • ¥15 做过TCL海信电视小米电视相关影视会员软件私我
  • ¥15 Mapreduce是正常的,在运行其他jar包时并没有任何问题,只是在做LogCount.jar 时出的问题。如图所示
  • ¥15 ImportError: DLL load failed while importing _iterative: 找不到指定的模块。
  • ¥15 如何通过交互分析得出某高危患者对放疗获益更多
  • ¥15 相关性分析中,p<0.05, r=0.29,怎么评价相关性呢
  • ¥15 docker部署Mongodb后输入命令报错?
  • ¥15 将下列流程图转变成python程序代码
  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序