html 模板中的 Webpack 静态文件引用

Question

我好像卡住了。这可能是一个以前被问过一百万次的问题，但我现在甚至不知道要搜索什么才能得到答案。我提前道歉。

我有一个 Webpack 4 VueJS 2 安装程序。我有点工作。 Stuff 可以编译，Webpack-dev-server 可以向我展示我的大部分网站，并包含许多我期望的预期行为。但是...我似乎无法让 Webpack 将文件注入我的 html 模板。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kollecto</title>
    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
    <!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
    <!-- Add to home screen for Android and modern mobile browsers -->
    <link rel="manifest" href="static/manifest.json">
    <meta name="theme-color" content="#ffffff">

    <!-- Add to home screen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="apple-mobile-web-app-title" content="Kollecto">
    <link rel="apple-touch-icon" href="static/img/icons/apple-touch-icon-152x152.png">
    <!-- <link rel="mask-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/safari-pinned-tab.svg" color="#ffffff"> -->
    <!-- Add to home screen for Windows -->
    <!-- <meta name="msapplication-TileImage" content="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/msapplication-icon-144x144.png"> -->
    <meta name="msapplication-TileColor" content="#ffffff">
    <!-- <% for (var chunk of webpack.chunks) {
        for (var file of chunk.files) {
        if (file.match(/\.(js|css)$/)) { %> -->
    <!-- <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %> -->
</head>
<body>
    <style>
        <!-- inline styles.... -->
    </style>
    <noscript>
        This is your fallback content in case JavaScript fails to load.
    </noscript>
    <div id="app">
    <div class="spinner-container">
        <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
        </svg>
    </div>
    </div>
    <!-- Todo: only include in production -->
    <!-- <%= htmlWebpackPlugin.options.serviceWorkerLoader %> -->
    <!-- built files will be auto injected -->
</body>
</html>

这是尝试从 Webpack 3 迁移到包含 VueJS 的 4。这是我的 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(),
    ]
};

当然还有我的 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: `<script>${fs.readFileSync(path.join(__dirname,
                './service-worker-dev.js'), 'utf-8')}</script>`
        }),
        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'
                ]
            }
        ]
    }
});

希望有人比我眼尖。因为我似乎无法将图标文件和脚本注入到我的模板中。我知道 index.html 被评论和取消评论等。但这就是我所拥有的。我需要帮助。请 :) 如果需要，可以提供更多代码。（我遵循的指南：https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772）

Answer 1

事实证明，除非明确告知，否则 webpack 会完全忽略项目中的 static 文件夹。这导致我将 CopyWebpackPlugin 添加到我的 prod/staging 构建中，如下所示：

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

这解决了我的问题。我所要做的就是让我的加载器和包寻找正确的文件。静态文件夹是应用程序根目录中静态文件夹的 1 对 1 副本。

html 模板中的 Webpack 静态文件引用

Webpack static file references in html template

javascript

webpack

vuejs2

webpack-4