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分离和分离后的图片处理

extract-text-webpack-plugin

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']
}

项目地址：https://github.com/adoctors/webpack-3.6.0-demo1