Webpack：如何将 html 文件复制到构建文件夹中？

Posted 2023-03-15

【中文标题】Webpack：如何将 html 文件复制到构建文件夹中？

【英文标题】：Webpack: how to copy html files into build folder?

【发布时间】：2020-12-17 14:40:35

【问题描述】：

我正在开发一个使用 Webpack 的 javascript 项目。老实说，我对 Webpack 有点陌生。让我解释一下我的项目的构建系统是如何工作的。当我运行“npm run dev”时，它会将项目根文件夹中的 js、scss 和其他文件夹中的文件复制到项目根文件夹中的 build 文件夹中。项目的根文件夹中有一个 index.html 文件。 index.html 文件被直接复制到 root/build/index.html 文件夹中。现在，我正在尝试在名为 info.html 的项目根文件夹下添加一个新的 HTML 文件。当我运行“npm run dev”时，我希望它将 info.html 文件复制到 build/index.html 文件夹中。我尝试将以下内容放入 webpack.config.dev.js 文件中。

 
    test: /\.html$/i,
    loader: 'html-loader',
  

但是 info.html 文件并没有被复制到构建文件夹中。我该怎么做？

当我使用 CopyWebpackPlugin 时，它抛出了以下错误。

node_modules\copy-webpack-plugin\node_modules\p-limit\index.js:30
                 catch 
                        ^

SyntaxError: Unexpected token 
    at new Script (vm.js:51:7)
    at createScript (vm.js:136:10)
    at Object.runInThisContext (vm.js:197:10)
    at Module._compile (internal/modules/cjs/

【问题讨论】：

您是否尝试过使用CopyWebpackPlugin？

是的，我试过用它。我已经更新了这个问题。请看一下。

尝试删除loader: 'html-loader',后多余的逗号

【参考方案1】：

使用copy-webpack-plugin时不需要file-loader或html-loader。

在你的 webpack 配置中导入模块：

const CopyPlugin = require('copy-webpack-plugin');

并将其附加到插件部分：

...

plugins: [

    ...

    new CopyPlugin(
        patterns: [
             
                from: path.resolve(__dirname, 'info.html'), 
                to: path.resolve(__dirname, 'build') 
            ,
        ],
    ),

    ...

],

...

【讨论】：

我收到此错误“node_modules\copy-webpack-plugin\node_modules\p-limit\index.js:30 catch ”，然后我运行“npm run dev”。

【参考方案2】：

需要升级nodejs，版本号必须大于10.13.0