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类的前缀以兼容相应的浏览器