webpack6--css 背景图片处理
当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里面的文件目录如下:
浏览器打开显示如下图:
完美~~
感谢阅读~~