TransWikia.com

Webpack: how to copy html files into build folder?

Stack Overflow Asked by Wai Yan Hein on November 29, 2020

I am working on a JavaScript project that is using Webpack. To be honest, I am a bit new to Webpack. Let me explain how my project’s build system work. When I run "npm run dev", it copies the files from js, scss and other folders within the project’s root folder into the build folder which is also inside the project’s root folder. There is an index.html file inside the project’s root folder. The index.html file is copied right into the {root}/build/index.html folder. Now, what I am trying to do is that I am trying to add a new HTML file right under the project root folder called, info.html. When I run "npm run dev", I want it to copy the info.html file into build/index.html folder. I tried putting the following in the webpack.config.dev.js file.

 {
    test: /.html$/i,
    loader: 'html-loader',
  }

But the info.html file is not copied across over into the build folder. How can I do that?

When I used the CopyWebpackPlugin, it was throwing the following error.

node_modulescopy-webpack-pluginnode_modulesp-limitindex.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/

2 Answers

You need to upgrade nodejs, the version number must be greater than 10.13.0

Answered by Danny Li on November 29, 2020

No need of file-loader or html-loader when you are using copy-webpack-plugin.

Import the module in your webpack config:

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

and append this to plugins section:

...

plugins: [

    ...

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

    ...

],

...

Answered by kmgt on November 29, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP