當css里面含有背景圖片，用webpack打包時會報如下錯：
如何處理這個問題呢？
我們需要借助於 file-loader 和 url-loader 這2個包。
下面具體說一下步驟：
1.安裝 file-loader 和 url-loader
cnpm install --save-dev url-loader file-loader
url-loader：
引入的圖片編碼，生成dataURl
file-loader：
解析url引入，根據我們的配置，將圖片拷貝到相應的路徑，再根據我們的配置，修改打包后文件引用路徑，使之指向正確的文件。
轉換規則：
1.文件大小<limit，url-loader將會把文件轉為DataURL；
2.文件大小>limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader
2.在webpack.config.js中，做如下配置：
module:{ rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|jsp|gif)/, use: [{ loader: 'url-loader', options: { limit: 1024, name:'[path][name].[ext]', outputPath: 'images/', publicPath: 'dist/' } }] //或者你可以簡寫成如下形式： //use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=images/&publicPath=dist/', } ] },
參數說明：
limit：轉化成最大編碼后的字節數
name：表示輸出的文件名規則，如果不添加這個參數，輸出的就是默認值：文件哈希。
- 加上[path]表示輸出文件的相對路徑與當前文件相對路徑相同，打包后文件中引用文件的路徑也會加上這個相對路徑
- 加上[name].[ext]則表示輸出文件的名字和擴展名與當前相同
outputPath：輸出文件路徑前綴。打包到指定的輸出文件夾下
publicPath：打包文件中引用文件的路徑前綴
3.看一下文件目錄結構
具體代碼如下：
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index</title> </head> <body> <div class="model"></div> <script src="../dist/index.bundle.js"></script> </body> </html>
base.js:
import css from '../css/common.css';
webpack.config.js:
const path = require('path'); //引入path
module.exports = {
mode: 'development',
entry: {
index: path.join(__dirname, 'src/js/index.js'),
signup:path.join(__dirname, 'src/js/signup.js'),
},
output: {
path:path.join(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|jpeg|jsp|gif)/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name:'[name].[ext]',
outputPath: 'images/',
publicPath: '../dist/images/'
}
}]
}
]
},
}
4.執行 cnpm run start
我們可以看到dist里面的文件目錄如下：
瀏覽器打開顯示如下圖：
完美~~
感謝閱讀~~