Webpack static file references in html template

Question

I seem to be stuck. This may be a question that has been asked a million times before but I am at a point where I don't even know what to search for to get an answer. I apologize in advance.

I have a Webpack 4 VueJS 2 setup. I sorta works. Stuff compiles and the Webpack-dev-server can show me most of my site and holds a lot of the intended behaviour I expect. But... I cannot seem to get Webpack to inject files into my html template.




    
    
    
    Kollecto

This is an attempt of a migration from Webpack 3 to 4 with VueJS included. Here is my webpack.common.js

'use strict';

const helpers = require('./helpers');
const path = require('path');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: {
        polyfill: '@babel/polyfill',
        main: path.resolve(__dirname, '../src/main.js'),
        vendor: path.resolve(__dirname, '../src/vendor.js')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                include: [helpers.root('src')]
            },
            {
                test: /\.html$/,
                use: [
                    'html-loader'
                ]
            },
            {
                test: /\.(svg|jpe?g|gif|png)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'static/img'
                    }
                }
            },
            {
                test: /\.(ttf|eot|woff2?|otf)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'static/fonts'
                    }
                }
            },
            {
                test: /\.ico$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash].[ext]',
                        outputPath: 'static/img/icons'
                    }
                }
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
};

And of course my webpack.dev.js

'use strict';

const webpack = require('webpack');
const path = require('path');
const common = require('./webpack.common');
const merge = require('webpack-merge');
const fs = require('fs')
const helpers = require('./helpers');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

module.exports = merge(common, {
    mode: "development",
    resolve: {
        extensions: [ '.js', '.vue' ],
        alias: {
            'vue$':'vue/dist/vue.runtime.js',
            '@': helpers.root('src')
        }
    },
    devServer: {
        port: 9000,
        hot: true,
        open: true,
        overlay: true,
        stats: {
            normal: true
        }
    },
    output: {
        filename: `[name].bundle.js`,
        path: path.resolve(__dirname, "dist")
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: "all"
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: helpers.root('index.html'),
            template: helpers.root('index.html'),
            inject: true,
            serviceWorkerLoader: ``
        }),
        new webpack.EnvironmentPlugin({NODE_ENV: 'development'}),
        new webpack.HotModuleReplacementPlugin(),
        new FriendlyErrorsPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.(scss|sass)$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    "sass-loader"
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
});

I hope somone has sharper eyes than me. Because I cannot seem to get icon files and scripts injected into my template. I know the index.html is commented and outcommented etc. But this is what I have. And I need help. Please :) More code can be provided if needed. (guide I followed: https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772)

IncrediblePony · Accepted Answer

It turns out that webpack completely ignores the static folder in a project unless explicitly told so. This have resulted in me adding the CopyWebpackPlugin to my prod/staging builds as follows:

new CopyWebpackPlugin([
    {
        from: path.resolve(__dirname, '../static'),
        to: 'static',
        ignore: ['.*']
    }
])

This fixed my problem. All I had to do from there was make my loaders and bundles look for the correct files. The static folder is a 1 to 1 copy of your static folder on your applications root directory.

Webpack static file references in html template

Answers (1)

Related Questions