webpack入门(四):自动处理css前缀、净化css
2018-09-27 本文已影响0人
前端小木鱼
一、自动处理css前缀：postcss-loader、autoprefixer
postcss(预处理器)，专门处理css的平台。
- 安装：
cnpm i postcss-loader autoprefixer -D - 创建postcss的配置文件postcss.config.js
//postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
- 配置loader
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','postcss-loader'],
publicPath: '../' //解决css背景图片路径问题
})
}
]
二、净化css：purifycss-webpack
- 安装：
cnpm i purifycss-webpack purify-css -D - 引入：
const PurifycssWebpack = require('purifycss-webpack') - 需要使用一个额外包用于扫描路径：glob
(1)安装：cnpm i glob -D
(2)引入：const Glob = require('glob') - 使用：
plugins: [
//提取CSS
new ExtractTextWebpackPlugin('css/index.css'),
//净化css
new PurifycssWebpack({
paths: Glob.sync(path.join(__dirname,'src/*.html'))
})
]
*注意：使用净化css一定要在使用提取css之后，否则可能不起作用。
三、source-map调试
- webpack 4.X开启调试，只需要以开发模式打包即可，--mode development
- webpack之前的版本开启调试，需要在webpack.config.js文件中通过devtool开启source-map：
//开发工具
devtool: 'source-map',
//插件
plugins: []
