webpack@3.6.0（2） -- css及图片相关问题
本篇内容
- css3前缀处理postcss
- 消除未使用的css部分
- 图片处理
- css分离和分离后的图片处理
css3前缀处理postcss
cnpm i -D postcss-loader autoprefixer
在webpack.config.js中建postcss.config.js
module.exports={
plugins:[
require('autoprefixer')
]
}
在webpack.config.js中
{
test:/\.css$/, //要匹配的文件后缀名
use: extractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader",'postcss-loader'] //此处加上'postcss-loader'
})
},
消除未使用的css部分
cnpm i -D purifycss-webpack purify-css
const glob=require('glob');
const purifyCSSPlugin=require('purifycss-webpack');
plugins:[
new purifyCSSPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html')) //注意键名为paths
})
],
图片处理
cnpm i -D url-loader
{
test:/\.(png|jpg|gif)/,
loaders:'url-loader', //插件需要引入，loader不需要专门的引入
options:{
limit:5000 , //单位B，小于是转为base64，大于复制
outputPath:'img/' //配置打包后图片放的位置，否则图片会生成在根目录下
}
}
css分离和分离后的图片处理
cnpm i -D extract-text-webpack-plugin
//引入插件
const extractTextPlugin=require('extract-text-webpack-plugin');
plugins:[
//将css分离出来(也可分离其他类型，如sass,less方法用啊相同use略有差异)
new extractTextPlugin('css/index.css') //注意此处路径前勿加/,否则link引入出会出现//多一个/
],
//改变上面的css-loader
{
test:/\.css$/, //要匹配的文件后缀名
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
使用webpack打包后css不会直接打在js中会分离出单独的css文件
此时若图片文件过大，没有转成base64则引入路径会出现问题：
Failed to load resource: the server responded with a status of 404 (Not Found)
//解决方案：
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].js',
publicPath:'../' //添加该句解决静态路径的问题，打包后css文件相对于图片
},
此时问题：代码中使用img标签引入图片路径打包后找不到相应图片
解决：
cnpm i -D html-withimg-loader
{
test:/\.(html|htm)$/i,
loader:['html-withimg-loader']
}
