1. less
我们在实际开发中，写
css都会用到一些预处理语言，比如less、scss，这个浏览器肯定不认识，webpack能帮我们转成css吗？😁，当然没问题，😎，如果我们用的是less我们需要引入两个模块，less、less-loader。
1. 首先，还是先安装这两个模块
cnpm i less less-loader -D
2. 然后，在
src目录下新建一个less文件夹，里面新建一个main.less文件，内容如下：
@a:darkcyan;
.demo1 {
color:@a;
font-weight: 600;
}
3. 再然后，在入口文件
main.js中引入less这个文件
import './css/main.css';
import './less/main.less'
document.write('Make the world a better place!!')
4. 接着，在
webpack.config.js文件的module属性中配置一下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../',
// hmr: process.env.NODE_ENV === 'development'
},
},
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options:{
limit: 500000,
outputPath: 'images'
}
}
]
},
{
test: /\.less$/,
use:['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename:'index.html',
hash: true,
title:'你好，世界',
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename:'css/index.css'
})
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
port: 8090,
hot: true,
open: true
}
}
注意：use中的加载规则是从从右往左加载，所以这个顺序不能错。
5. 最后，命令行运行
npm run dev，浏览器页面显示如下：
image.png
这里我们是把
less，打包到style中去了，我想也把它分离到css文件中去，怎么做呢？ 也简单，我们仿照上面的css文件规则，写一下就好了，如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath:'../',
// hmr: process.env.NODE_ENV === 'development'
},
},
'css-loader'
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options:{
limit: 500000,
outputPath: 'images'
}
}
]
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'less-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename:'index.html',
hash: true,
title:'你好，世界',
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename:'css/index.css'
})
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
port: 8090,
hot: true,
open: true
}
}
dist目录下的index.css文件，内容如下：
body {
background-image: url(../images/cf7511f27525209429a8ab3c68a7a4ce.jpg);
color: #fff;
}
.demo1 {
color: darkcyan;
font-weight: 600;
}
less，搞定，😁
2. sass
sass和less差不太多，只是引的模块不一样，sass需要引入node-sass、sass-loader这两个模块，其他的和less是一样的，这里就不再多写了，自己悟😘
3. 前缀
我们平时写
css的时候，会经常用到css3的属性，这时就需要加前缀来兼容浏览器了，这个工程量如果自己写的话，不疯掉也差不多了😥，webpack有没有自动加前缀的功能呢？ 有，😎，他需要两个个牛逼的插件postcss-loader、autoprefixer，没错就是它俩😍。
1.首先，废话不多说还是先安装：
cnpm i postcss-loader autoprefixer -D
2. 然后，这里有点不一样，由于
postcss功能比较强大，我们一般定义一个postcss.config.js文件，来进行配置
module.exports = {
plugins: [
require('autoprefixer')
]
}
3.接着，我们要在
webpack.config.js中的module属性中，加入postcss-loader这个转化器
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCss = require('mini-css-extract-plugin');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCss.loader,
},
'css-loader',
{
loader:'postcss-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCss({
filename: 'css/index.css'
})
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
port: 8090,
open: true
}
}
4. 命令行运行，
npm run dev即可
4. 删除冗余
在项目开发的过程中，我们的
css文件中的内容不一定能全部用到，比如bootstrap，我们可能只用了一小部分，那没用到的部分，上线之后就没有意义。😱
webpack提供了一个消除冗余的插件，purify-css、purifycss-webpack，依靠这两个插件就看可以将css文件中没用的部分删掉，它的实现原理是先扫描html文件，然后扫描css文件，两者进行对比，然后将没有用到的css删除😊
1. 首先，还是先装包
cnpm i purifycss-webpack purify-css -D
2. 然后，我们要想用这个
purifycss-webpack这个插件，还需要一个辅助的插件glob，这个插件会扫描我们的项目路径，安装glob插件
cnpm i glob -D
3.接着，在
webpack.config.js文件中，引入这个插件，并配置一下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCss = require('mini-css-extract-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const glob = require('glob')
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: MiniCss.loader,},
'css-loader',
{loader:'postcss-loader'}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCss({
filename: 'css/index.css'
}),
new PurifyCssWebpack({ // 配置purifycss-webpack插件
paths: glob.sync(path.resolve(__dirname, 'src/*.html'))
})
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
port: 8090,
open: true
}
}
最后，运行
npm run build，就可以消除css中的无用样式了😎
网友评论