Webpack：如何將 html 文件復制到構建文件夾中？

Question

我正在開發一個使用 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/

Answer 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') 
            },
        ],
    }),

    ...

],

...

Answer 2

需要升級nodejs，版本號必須大於10.13.0