Почему HtmlWebpackPlugin не внедряет скрипт в шаблон с именем файла, установленным в подкаталог?
Если я использую это:
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',
},
},
};
};