AnswerBun.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!

Related Questions

How can I get different margins when appending divs in CSS?

4  Asked on February 4, 2021 by michaelstackquestion

     

Getting error while running merged jtl files

2  Asked on February 4, 2021 by ajij-shaikh

   

Why don’t need to use free() function in this case?

2  Asked on February 4, 2021 by akrilmokus

     

how to show data of databse in navigation bar on laravel 7

2  Asked on February 4, 2021 by fahad-munir

     

String formatting: optional section

1  Asked on February 3, 2021 by cerno

     

Multiple table to encode json and display

1  Asked on February 3, 2021 by j-wujeck

   

i need to remove duplicated comments from every post

1  Asked on February 3, 2021 by rabie_alkholi

         

Why is C is much slower as compared to Java?

1  Asked on February 3, 2021 by jaysmito-mukherjee

       

Server returned HTTP response code: 429 for URL JAVA Reddit JSON

2  Asked on February 3, 2021 by luke-prior

     

How to measure sequential memory read speed in C/C++

1  Asked on February 3, 2021 by sz-ppeter

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir