webpack - 为什么 HtmlWebpackPlugin 没有在模板中注入脚本并将文件名设置为子目录？

Question

如果我使用这个：

  new HtmlWebpackPlugin({
    template: 'index.html',
    filename: 'index.html',
  }),

它起作用了，即script标签被注入到模板中。如果我使用这个：

  new HtmlWebpackPlugin({
    template: 'index.html',
    filename: 'dev/index.html',
  }),

该文件index.html是在没有script标签的情况下创建的。我应该从哪里开始寻找问题的原因？无论dev是否filename使用HtmlWebpackPlugin.

我在用着：

"html-webpack-plugin": "^4.3.0",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"

完整的配置文件是：

const path = require('path');
const webpack = require('webpack');

// Plugins
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Project setup
const svelteOptions = require('./svelte.config.js');
const extensions = ['.mjs', '.js', '.svelte', '.html', '.json'];
const mainFields = ['svelte', 'browser', 'module', 'main'];
// Base URL is passed to JS and SCSS
// update as needed for production.
// IMPORTANT: It must be also updated in package.json
// in the script "build:html:prod" -> baseurl.
const baseURL = '';

module.exports = (env, options) => {
    const DEVELOPMENT = options.mode === 'development';
    return {
        entry: {
        app: './src/js/index.js'
        },
        resolve: {
        mainFields,
        extensions,
        alias: {
            'svelte': path.resolve('node_modules', 'svelte'),
        },
        },
        optimization: {
        minimizer: [
            new TerserJSPlugin({}),
            new OptimizeCSSAssetsPlugin({}),
        ],
        },
        module: {
        rules: [
            {
            test: /\.svelte$/,
            use: {
                loader: 'svelte-loader',
                options: svelteOptions(DEVELOPMENT),
            },
            },
            {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader', options: {
                presets: [
                    ['@babel/preset-env'],
                ],
                },
            },
            },
            {
            test: /\.css$/,
            use: [
                {
                loader: MiniCssExtractPlugin.loader, options: {
                    hmr: DEVELOPMENT,
                },
                },
                {
                loader: 'css-loader', options: {
                    sourceMap: DEVELOPMENT,
                    url: false,
                },
                },
            ],
            },
            {
            test: /base\.scss$/,
            use: [
                {
                loader: MiniCssExtractPlugin.loader, options: {
                    hmr: DEVELOPMENT,
                },
                },
                {
                loader: 'css-loader', options: {
                    sourceMap: DEVELOPMENT,
                    url: false,
                },
                },
                {
                loader: 'sass-loader', options: {
                    sourceMap: DEVELOPMENT,
                    prependData: '$__BASEURL__: "' + baseURL + '";',
                },
                },
            ],
            },
            {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader'
            },
        ],
        },
        devtool: DEVELOPMENT ? 'source-map' : '',
        plugins: [
        new MiniCssExtractPlugin({
            filename: DEVELOPMENT
            ? 'dev/css/[name].css'
            : 'publish/dist/css/[name].min.css',
        }),
        new webpack.DefinePlugin({
            __BASEURL__: JSON.stringify(baseURL),
        }),
        new CopyPlugin(DEVELOPMENT ? [] : [
            {from: 'assets', to: 'publish/assets'},
        ]),
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'dev/index.html',
        }),
        ],
        output: {
        path: __dirname,
        publicPath: '/',
        filename: DEVELOPMENT
            ? 'dev/js/[name].js'
            : 'publish/dist/js/[name].min.js',
        sourceMapFilename: DEVELOPMENT
            ? 'dev/js/[name].map'
            : '',
        },
        devServer: {
        historyApiFallback: {
            index: 'index.html',
        },
        },
    };
};

标签： webpackhtml-webpack-pluginsvelte-3