現(xiàn)在我的這個(gè)項(xiàng)目是將css和js單獨(dú)打包出來,打包后的目錄結(jié)構(gòu)和打包前一致。打包前:從這張圖可以看到,如果是css文件夾根目錄下的css文件引用images文件夾下的圖片應(yīng)該使用../就可以了,如果是css下某一個(gè)文件夾下面的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'), ] },]結(jié)果打包完成后啟動(dòng)項(xiàng)目,本來那些css根目錄下的css引用的圖片路徑有一部分錯(cuò)誤了。css根目錄下的css文件圖片路徑請(qǐng)問各位大神,這個(gè)問題用什么辦法可以解決?可以把對(duì)應(yīng)的圖片打包到對(duì)應(yīng)的文件夾下嗎?我是一個(gè)webpack菜鳥,配置有點(diǎn)雜亂,望各位大神見諒?。。?
webpack單獨(dú)分離打包c(diǎn)ss,css里引用的圖片路徑錯(cuò)誤,怎么解決?
料青山看我應(yīng)如是
2019-03-15 14:15:37