我正在尝试让Webpack 4将.png文件输出到/dist/assets,并通过file-loader在我的index.html文件中使用它。
.png文件确实输出到dist/assets,但浏览器没有加载它。有趣的是,我在webpack.config.js文件中将我的.png文件与字体文件处理方式相同,而字体文件可以被浏览器加载。
以下是构建时我的文件目录: 以下是 webpack.config.js 中我认为与此问题相关的代码。
整个webpack.config.js文件如下,或者可以在存储库中找到(以及其他文件),其中此代码托管。
.png文件确实输出到dist/assets,但浏览器没有加载它。有趣的是,我在webpack.config.js文件中将我的.png文件与字体文件处理方式相同,而字体文件可以被浏览器加载。
以下是构建时我的文件目录: 以下是 webpack.config.js 中我认为与此问题相关的代码。
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
...
{
test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
},
...
整个webpack.config.js文件如下,或者可以在存储库中找到(以及其他文件),其中此代码托管。
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
/*publicPath: 'dist'*/
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.vue$/,
//exclude: /node_modules/,
loader: 'vue-loader',
},
{
test: /\.(sa|sc)ss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader' // Loads a sass / scss file and compiles it to CSS
]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
},
{
test: /\.svg$/,
use: [
'vue-svg-icon-loader'
],
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'bundle.css',
chunckFilename: '[id].css',
})
]
}
index.html
文件应该包含在我的 /dist 中,这是有道理的。我会进行更改,使用 copy-webpack-plugin,并看看效果如何。谢谢! - hyperupcall