一、webpack使用css样式
webpack默认是支持js的,对于别的css或者typescript必须要安装加载器
- 1、安装包
npm install style-loader css-loader less less-loader -D
- 2、在
webpack.config.js中的module配置规则(use中是一个数组,从后面解析到前面)
...
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }, // 是从右边开始读取到左边的
]
}
]
},
...
- 3、在
src中创建一个css的文件夹,里面创建a.css和b.less文件 - 4、在
index.js中引入样式文件
import './css/a.css';
import './css/b.less';
- 5、启动服务,查看浏览器
Elements栏
二、将样式文件抽取成一个单独的文件
上面的方式虽然可以加载样式文件,但是加载出来的全部的以
<style type="text/css">....</style>的方式到页面中(我们在开发的时候可以这样,但是项目上线后的就希望是单独的文件),增加了js文件的体积,如果项目大,可能会造成js文件过大加载慢,甚至加载不出的弊端。
- 1、抽取单独的
css目前主要有2个包可以选择- 使用插件
extract-text-webpack-plugin@next - 使用插件
mini-css-extract-plugin(今后取代上面那个插件的包)
- 使用插件
- 2、安装包
npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
- 3、使用
extract-text-webpack-plugin@next插件的方式- 1.引包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
* 2.修改`module`中的加载器
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPligin.extract({
use: [
// { loader: 'style-loader' }, 注意这个地方要删除
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: ExtractTextWebpackPligin.extract({
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
}
]
},
...
* 3.使用插件
plugins: [
...
new ExtractTextWebpackPligin({
filename: 'css/index.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
title: 'webpack测试',
hash: true,
// 先注释下面的代码,更好看结果
// minify: {
// removeAttributeQuotes: true, // 去除双引号
// collapseWhitespace: true, // 合并代码到一行
// }
})
],
* 4、在`index.js`中依然是导入`css`文件
import './css/a.css';
import './css/b.less';
- 4、使用
mini-css-extract-plugin插件方式- 1.导包
const MiniCssTractPlugin = require('mini-css-extract-plugin');
* 2.在`module`中配置
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' }
]
},
{
test: /\.less$/,
use: [
MiniCssTractPlugin.loader,
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
]
},
* 3.配置插件
plugins: [
...
new MiniCssTractPlugin({
filename: 'css/css.css',
}),
]
* 4.一样的在`index.js`中导包
* 5.测试
三、对上面抽取样式优化(抽取出多个样式文件)
- 1、上面的方法是将全部的
css,less抽取成一个css文件,如果我们要抽取成单独的文件
...
// 定义两个文件
let cssExtract = new ExtractTextWebpackPligin('css/css.css');
let lessExtract = new ExtractTextWebpackPligin('css/less.css');
plugins: [
// 使用前面定义的插件
cssExtract,
lessExtract,
new webpack.HotModuleReplacementPlugin(), // 热更新,每次修改后会自动刷新
new CleanWebpackPlugin(), // 每次打包清空dist文件夹
...HtmlPlugin,
],
module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
})
}
]
},
- 2、打包
四、关于抽取样式修改后不刷新的问题(开发的时候依然是加上style中)
- 1.定义
disable
const cssExtract = new ExtractTextWebpackPligin({
filename: 'css/a.css',
disable: true,
});
const lessExtract = new ExtractTextWebpackPligin({
filename: 'css/b.css',
disable: true,
});
- 2.在
modul中使用
module: {
rules: [
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' }
]
})
},
{
test: /\.less$/,
use: lessExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'less-loader' },
]
})
}
]
},
五、关于抽取样式的时候删除未使用的样式(减少样式打包的体积)
- 1、安装包
npm install purifycss-webpack purify-css glob -D
- 2、导入
const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
- 3、使用
...
// 注意必须要在HtmlWebpackPlugin后面使用
new PurifycssWebpack({
paths: glob.sync(path.resolve('src/*.html'))
})
...
六、使用postcss
关于postcss的介绍,提供另外一篇中文文章连接地址
- 1、使用
postcss实现该功能 - 2、安装包
npm install postcss-loader autoprefixer -D
- 3、配置
postcss-loader的加载器
...
{
test: /\.css$/,
use: cssExtract.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{ loader: 'postcss-loader'},
]
})
},
...
- 4、项目下新创建一个
postcss.config.js的配置文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
- 5、在
a.css中写上css3的样式
body {
background: cyan;
transform:rotate(30deg);
}
- 6、执行命令
npm run build查看生成的文件
七、对样式文件进行压缩
- 1、安装包
npm install optimize-css-assets-webpack-plugin -D
- 2、引入
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
- 3、普通压缩
plugins: [
cssExtract,
lessExtract,
new OptimizeCSSAssetsPlugin(),
...
],
- 4、处理压缩
new OptimizeCSSAssetsPlugin ({
// 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件
assetNameRegExp: /\.(sa|sc|c|le)ss$/g,
// 指定一个优化css的处理器，默认cssnano
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: [ 'default', {
discardComments: { removeAll: true}, //对注释的处理
normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码
}]
},
canPrint: true // 是否打印编译过程中的日志
}),