在这篇博客中,我将会你介绍CSS部分的相关配置
我们先看一下目录结构
然后,我们在入口文件index.js
中引入base.less
文件
import './css/base.less';
这样子是不行的。我们知道,webpack是只能识别JS的,对于Css及Less的处理,我们需要借助相应的loader
我们安装这几个loader
cnpm i -D less less-loader css-loader style-loader
在rules
中进行配置
module: {
rules: [
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
}
loader的执行顺序是自右往左的,即less-loader
- css-loader
- style-loader
将css-loader内部样式注入到我们的HTML页面执行打包命令后我们发现css代码已经打包到了生成的js文件中,打开页面后也有了样式。而css代码我们并不想和js打包到一起,那么有什么方法实现呢?我们可以用mini-css-extract-plugin
插件将css抽离出来
mini-css-extract-plugin
)new MiniCssPlugin({
filename: '[name].[hash:5].bundle.css'
})
{
test: /\.less$/,
use: [
{ loader: MiniCssPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
执行打包命令,我们看一下目录结构
dist目录下生成了css文件,并且挂载到了html文件上
我们打开生成的css文件,发现.active
并没有使用到却也打包了进来,我们可以用purifycss-webpack
消除未使用的CSS
purifycss-webpack
)我们安装这个插件
cnpm i -D purifycss-webpack purify-css
因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。
const glob = require('glob');
配置plugins
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
这里配置了一个paths,主要是需找html模板,purifycss根据这个配置会遍历你的文件,查找哪些css被使用了
我们再次运行打包命令,.active
便没有被打包进来了。
仔细观察我写的css,会发现我写了一个css3的属性transform: translate(50deg, 50deg);
,有些css属性因为浏览器的差异是需要带前缀来进行兼容的,需要我们手动辨识和添加这些前缀吗?我们有更方便的做法,我们用autoprefixer postcss
给某些css属性自动带上前缀
我们进行安装
cnpm install --save-dev postcss-loader autoprefixer postcss
在项目根目录创建 postcss.config.js
,并且设置支持哪些浏览器,必须设置支持的浏览器才会自动添加添加浏览器兼容
{
test: /\.less$/,
use: [
{ loader: MiniCssPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'postcss-loader' },
{ loader: 'less-loader' }
]
}
但是打包后的css代码并没有被压缩,我们用optimize-css-assets-webpack-plugin
压缩css代码
optimize-css-assets-webpack-plugin
)配置plugins
new OptimizeCssAssetsPlugin()
执行打包命令后,完成压缩