我的webpack.config.js
文件
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
index: './src/js/index.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
},
{
test: /\.(jpg|png)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
],
},
output: {
path: path.resolve(__dirname, './dist'),
filename: './js/[name].bundle.js',
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, './src/index.html'),
filename: 'index.html',
chunks: ['index'],
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: './css/[name].css',
}),
new CopyWebpackPlugin({
patterns: [{ from: './src/assets', to: './assets' }],
}),
],
devtool: 'source-map',
mode: 'development',
};
问题出现在我的文件结构中:
奇怪的是,当我在终端中运行npm run build
时,所有目录都被正确加载,包括background-image
和slider
文件夹中的图像被加载,但还会加载一些带有随机数字名称的额外文件。
那三个额外的.png
文件被作为img1.png
、img2.png
和img3.png
文件加载到我的index.html
中,在我的网站上无法正常工作,它们就是不想加载。
publicPath: '/'
选项,或者尝试使用 file-loader:npm i file-loader
并在配置中加入{ test: /\.(jpe?g|png|gif|svg)$/i, use: 'file-loader' }
。 - MMMM
- user15076617