Having trouble copying an HTML file with Webpack

JavaScript
1

I am trying to catch up with contemporary development standards and technologies so I am currently learning webpack. For a small project I am developing I am attempting to copy an HTML file from a src directory to a dist directory. There seems to be many ways to do this. I simply need to move it.

Once supposed method is to use the CopyWebpackPlugin. I get a parse error with this method (and other methods I’ve tried).

ERROR in ./src/index.html
Module parse failed: /Users/estevan/Documents/Projects/ecv9_0.2/src/index.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

My code:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
//const sass = require('src/scss/style.scss');

// Plugin constants
const extractSass = new ExtractTextPlugin({
    filename: "[name].css",
    disable: process.env.NODE_ENV === "development"
});

// Copies files and places at destination
const copyFiles = new CopyWebpackPlugin([
    {
        from: './src/assets'
    }
]);

const copyHTMLFiles = new CopyWebpackPlugin([
    {
        from: './src/*.html',
        to: "./dist"
    }
]);

module.exports = {
    entry: ['./src/app.js', './src/scss/style.scss'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: extractSass.extract({
                use: [{
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader", // compiles Sass to CSS
                    options: {
                        includePaths: [
                            path.resolve("./node_modules/bootstrap/dist/css")
                        ]
                    }
                }],

                fallback: "style-loader"
            })
            },
            {
                test: /\.(jpg|png|svg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 8000,
                        name: "assets/[hash]-[name].[ext]"
                    }
                }]
            },
        ]
    },
    plugins: [
        extractSass,
        copyFiles,
        copyHTMLFiles,

        // https://stackoverflow.com/questions/38825936/jquery-is-not-defined-when-using-webpack-to-load-bootstrap
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })

    ],
    stats: {
        colors: true
    },

    devtool: 'source-map',
};

Suggetions?

2

It looks like webpack is expecting HTML code instead of JavaScript code.

3

I ended up adding this under rules and it helped:

{
    test: /\.html?$/,
     loader: "file-loader?name=[name].[ext]"
},

I can’t find forums online that are able to discuss webpack with me. Can you recommend any other forums? I’ve tried two places barely any responses.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.