在使用webpack配置文件进行项目打包时，发现html中引用的图片在dist目录下未生成对应的images文件夹。经过检查，问题出在url-loader配置上。limit参数设置为2048，意味着小于2048字节的图片会被内联到css或js文件中，而大于此限制的图片才会被输出到指定路径。调整url-loader配置或增加file-loader以确保所有图片都被正确打包。
Vision
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.5"
文件结构(打包前)：
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var getHtmlConfig = function (name, title) {
return {
template: './demos/' + name + '.html',
filename: 'demos/' + name + '.html',
title: title,
inject: true | 'body',
hash: true,
cache: true,
chunks: ['common', name]
};
};
module.exports = {
entry: {
'common' : './js/common.js',
'a' : './js/a.js',
},
devServer: {
host: '0.0.0.0',
useLocalIp: true,
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
port: 9000,
open: true
},
// 模块解析
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'px2rem-loader?remUnit=23.438&remPrecision=8', 'postcss-loader'],
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'px2rem-loader?remUnit=46.875&remPrecision=8', 'sass-loader', 'postcss-loader']
})
},
{
test: /\.(png|jpg|gif|jpeg)$/,
loader: 'url-loader',
options: {
limit: 2048,
name: 'images/[name].[ext]'
}
},
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
loader: 'url-loader',
options: {
limit: 8192,
name: 'fonts/[name].[ext]'
}
}
]
},
externals: {
jquery: 'window.jQuery'
},
// 插件
plugins: [
new HtmlWebpackPlugin(getHtmlConfig('a', 'ab')),
new ExtractTextPlugin('css/[name].min.css')
],
// 输出
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].min.js',
}
};
问题：html文件中通过img标签引入图片，打包后dist文件夹下并没有出现images文件夹？
扫一扫
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
