webpack不能直接解析css，需要解析。
Loading CSS
加载样式需要css-loader和style-loader。 css-loader可以通过@import和url()去查找匹配的文件，类似于es2015的import，将css样式引入到js中。 style-loader通过标签将css样式注入到html中。
安装，
npm install css-loader style-loader --save-dev
webpack.plugin.js
...
const loadCSS = (include,exclude)=>({
module: {
rules: [
{
test:/\.css$/,
include,
exclude,
use:["style-loader", "css-loader"],
}
]
}
})
...
从上面中的代码可以清楚的认识到css-loader和style-loader的用法，loader是将源文件加载然后输出新的文件，而且他们是从右至左加载，可以理解成styeLoader(cssLoader(input))。
less
安装less
npm install less --save-dev
webpack.plugin.js
...
const loadCSS = (include,exclude)=>({
module: {
rules: [
{
test:/\.less$/,
include,
exclude,
use:["style-loader", "css-loader", "less-loader"],
}
]
}
})
...
分离css
打包后的代码最好是css与js分离，为了这个目的我们需要新的插件和loader:MiniCssExtractPlugin。 首先安装：
npm install mini-css-extract-plugin --save-dev
安装好了过后配置
webpack.plugin.js
...
const extractCSS = ({include,exclude,use = []}) => {
const plugin = new MiniCssExtractPlugin({
filename: "[name].css",
})
return {
module:{
rules: [
{
test: /\.less$/,
include,
exclude,
use: [
MiniCssExtractPlugin.loader,
].concat(use),
}
]
},
plugins:[plugin]
}
}
...
webpack.config.js
...
// 生产环境
const productionConfig = merge(
commonConfig,
extractCSS({use:["css-loader", "less-loader"]})
)
...
这样就可以将css分离出来。
打包去除冗余的CSS
我们需要找一些css库来测试这个功能，在这里我们就使用Pure.css首先安装
npm install purecss --save
然后在我们的项目中选择一个元素，然后将其中一个元素的赋予相应的类名，
src/component.js
export const two = (text = "Hello dasd") => {
const element = document.createElement("button");
element.className = 'pure-button'
element.innerHTML = text;
return element;
};
这个时候打包后的css会将所有的文件都打包到main.css文件中。这肯定不是我们想要的，我想要的是在只被使用的css打包的main.css中。
使用PurifyCSS
首先安装，
npm install glob purifycss-webpack purify-css --save-dev
然后再配置
webpack.prod.js
...
const purifyCSS = ({ paths }) => ({
plugins: [new PurifyCSSPlugin({ paths })],
});
...
然后将工具和之前的配置合并，
webpack.config.js
...
const PATHS = {
app: path.join(__dirname, "./../src"),
};
...
const productionConfig = merge(
commonConfig,
extractCSS({use:["css-loader", "less-loader"]}),
purifyCSS({
paths: glob.sync(`${PATHS.app}/**/*.js`, { nodir: true }),
})
)
...
这样就可以实现将没用的css给过滤掉。
自动补全前缀
为了兼容所有的浏览器，有时候需要对某些css属性进行浏览器的前缀补全。就像chrome和ie之间会有一些差异。我们需要在webpack中进行配置，首先我们需要安装Autoprefixing。
npm install postcss-loader autoprefixer --save-dev
设置相关配置 webpack.prod.js
...
const autoprefix = () => ({
loader: "postcss-loader",
options: {
plugins: () => [require("autoprefixer")({
'browsers': ['> 1%', 'last 2 versions']
})],
},
});
...
这儿默认的 { 'browsers': ['> 1%', 'last 2 versions'] }很重要，在测试的过程中，发现这部分必须要要定义。
然后将配置好的loader安排到生产环境中
webpack.config.js
...
const productionConfig = merge(
commonConfig,
extractCSS({use:["css-loader",autoprefix(),"less-loader"]}),
purifyCSS({
paths: glob.sync(`${PATHS.app}/**/*.js`, { nodir: true }),
})
)
...
这样就大功告成了。
写到这儿我们做了这么几件事
1、正确的使用了less-loader，css-loader等实现了在开发环境下，正确的解析css和less；
2、学习了如何使用相应的工具将css从js中分离出来；
3、学习了如何使用相应的工具将冗余的css样式去除；
4、学习了如何使用相应的工具补全了css类的前缀以兼容相应的浏览器
