为什么HtmlWebpackPlugin没有将脚本注入到模板中,并将文件名设置为子目录?
如果我使用这个:为什么HtmlWebpackPlugin没有将脚本注入到模板中,并将文件名设置为子目录?,webpack,html-webpack-plugin,svelte-3,Webpack,Html Webpack Plugin,Svelte 3,如果我使用这个: new HtmlWebpackPlugin({ template: 'index.html', filename: 'index.html', }), new HtmlWebpackPlugin({ template: 'index.html', filename: 'dev/index.html', }), 它可以工作,即脚本标记被注入模板中。如果我使用这个: new HtmlWebpackPlugin({ te
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
}),
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'dev/index.html',
}),
它可以工作,即脚本
标记被注入模板中。如果我使用这个:
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html',
}),
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'dev/index.html',
}),
创建的文件index.html
没有script
标记。我应该从哪里开始查找问题的原因?无论是否使用HtmlWebpackPlugin
的filename
选项中的dev
子目录,都可以很好地复制/创建所有其他文件
我正在使用:
"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',
},
},
};
};