现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致。打包前:从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如果是css下某一个文件夹下面的css引用图片的话,就要往上层目录跳两层../../打包后:webpack.config.jsvar webpack = require('webpack');var glob = require('globby') var utils = require('utils');var htmlWebpackPlugin = require('html-webpack-plugin');var nodeExternals = require('webpack-node-externals');var CompressionPlugin = require("compression-webpack-plugin");var ExtractTextPlugin = require('extract-text-webpack-plugin');var CSS_PATH = { css: { pattern: ['./public/css/**/*.css' ,'!./public/css/index.css'], src: path.join(__dirname, './public/css/'), dst: path.resolve(__dirname, 'build/public/css/'), }}function getCSSEntries(config) { var fileList = glob.sync(config.pattern) console.log(fileList) return fileList.reduce(function (previous, current) { var filePath = path.parse(path.relative(config.src, current)) var withoutSuffix = path.join(filePath.dir, filePath.name) previous[withoutSuffix] = path.resolve(__dirname, current) return previous }, {})}module.exports = [ { target:'web', externals: [nodeExternals()], devtool: 'cheap-module-eval-source-map', context: path.resolve(__dirname), entry: getCSSEntries(CSS_PATH.css), output: { path: CSS_PATH.css.dst, filename: '[name].css' }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ use: "css-loader", publicPath:'../' }) }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: 'url-loader?limit=20000&name=[name].[ext]', }, { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ] }, resolve: { extensions: ['.css'] }, plugins: [ new ExtractTextPlugin('[name].css'), ] },]结果打包完成后启动项目,本来那些css根目录下的css引用的图片路径有一部分错误了。css根目录下的css文件图片路径请问各位大神,这个问题用什么办法可以解决?可以把对应的图片打包到对应的文件夹下吗?我是一个webpack菜鸟,配置有点杂乱,望各位大神见谅!!!
2 回答
慕姐8265434
TA贡献1813条经验 获得超2个赞
path是webpack所有文件的输出的路径,必须是绝对路径
比如:output输出的js,url-loader解析的图片,HtmlWebpackPlugin生成的html文件, 都会存放在以path为基础的目录下
publicPath 并不会对生成文件的路径造成影响
主要是对你的页面里面引入的资源的路径做对应的补全,常见的就是css文件里面引入的图片
如题你需补一个 publicPath
添加回答
举报
0/150
提交
取消