作者:再世飞龙_804 | 来源:互联网 | 2022-12-30 18:18
我正在尝试建立一个基本的webpack项目。除了生成的CSS中生成的图像路径外,其他所有内容都很平滑。
资料夹结构:
src/
assets/
images/
js/
scss/
dist/
assets/ <--- generated correctly, incl. images
images/
bundle.js
main.bundle.css <--- includes "wrong" paths, starting with dist/
index.htm
webpack.config.js
webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
watch: true,
entry: ['./src/js/main.js', './src/scss/main.scss'],
output: {
filename: 'dist/bundle.js'
},
module: {
rules: [
{ // regular css files
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
}),
},
{ // sass / scss loader for webpack
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
},
{ // images
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
context: path.resolve(__dirname, "src/"),
outputPath: 'dist/'
}
}
]
},
]
},
plugins: [
new ExtractTextPlugin({
filename: 'dist/[name].bundle.css',
allChunks: true
})
]
};
src / scss / main.scss
@import "./../../node_modules/bootstrap/scss/bootstrap";
body {
background-image: url('../assets/images/bg.jpg');
}
dist / main.bundle.css
body {
background-image:url(dist/assets/images/bg.jpg)
}
索引
问题:
dist/main.bundles.css
已位于中dist/
,但在图像路径前加上dist/
。我这边肯定有配置问题。
任何的想法?提前致谢!
1> Mr. B...:
通过添加publicPath: '../'
(docs)和useRelativePaths: true
(docs)解决了问题:
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
context: path.resolve(__dirname, "src/"),
outputPath: 'dist/',
publicPath: '../',
useRelativePaths: true
}
}
]
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'dist/[name].bundle.css',
allChunks: true
})
]
};