Fork me on GitHub

webpack12--css代码分割

chunkfilename

一般在使用webpack的时候,我们会在output里面加上一个chunkName的配置:

1
2
3
4
5
6
output:{
// publicPath:'http://cdn.com.cn',
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(__dirname,'../dist')
}

一般我们的入口文件会走filename这个配置项,而间接引入的一些代码js代码文件(比如一些异步的文件),这些文件都是在被入口文件所间接引用,一般这些文件在打包的时候,就会走chunkFilename这个配置项.

minicssExtractPlugin

我们利用之前的那些配置文件去对css文件进行一波打包.

index.js

1
import './style.css';

style.css

1
2
3
body{
background: green;
}

然后打包,访问打包的index.html文件会发现全局的样式文件已经生效了.

但是在打包出来的dist目录下面却没有对应的css文件.

这是因为webpack每次打包的时候会把css文件打包的js文件里面去,这就是css in js的概念.

如果我们想把css文件和js文件分开进行打包,需要引入一个插件叫做minicssExtractPlugin,但要注意的是这个插件目前还不支持热更新模块,因而我们只是使用其在线上环境中去使用.

这里我们先安装一波:

npm install –save-dev mini-css-extract-plugin

由于这个插件只能在线上起作用,这里我们需要重新修改一下线上环境配置和生产环境配置的style-loader配置,公共的配置里面就不写样式的loader相关了

webpack.common.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// 用来存 dev和prod里面相同的代码
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: {
main:'./src/index.js',
},
module:{
rules:[{
test: /\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
},
{
test: /\.(jpg|png|gif)$/,
use:{
loader:'url-loader',
options:{
name:'[name]_[hash].[ext]',
outputPath:'images/',
limit: 2048 // 图片大于2048B就打包成单独打包,否则打包成base64打包到js文件里面去.
}
}
},
{
test: /\.(eot|ttf|svg)$/,
use:{
loader:'file-loader',
}
}]
},
plugins:[
new htmlWebpackPlugin({
template:'src/index.html' // 用这个文件做打包生成的html文件的模板文件
}),
new cleanWebpackPlugin(),
],
optimization:{
usedExports: true,
splitChunks: { // 代码分割的配置
chunks: 'all',
}
},
output:{
// publicPath:'http://cdn.com.cn',
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(__dirname,'../dist')
}
}

开发环境里面还是原来的style-loader

webpack.dev.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const webpack = require('webpack')
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
const devConfig = {
mode:'development',
devtool:'cheap-module-eval-source-map',
devServer:{
contentBase:'./dist', //启动的服务器的根路径
open:true,
hot:true,
// hotOnly: true
},
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
}]
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
}
module.exports = merge(devConfig,commonConfig)

生产环境里面替换一波style-loader为MiniCssExtracPlugin.loader

webpack.prod.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const commonWebpackConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const prodConfig = {
mode:'production',
devtool:'cheap-module-source-map',
module: {
rules:[{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
}, {
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}]
},
plugins: [
new MiniCssExtractPlugin({})
]
}
module.exports = merge(commonWebpackConfig,prodConfig)

这里记得要把dev里面的Optimizations里面的usedExports:true这个配置移到common.js里面,然后把package.json里面的”sideEffects”配置修改一波

1
2
3
"sideEffects": [
"*.css"
],

然后使用线上的命令进行打包npm run build,这样我们的css代码就会被单独打包出来了.

在webpack.prod.js文件里面添加一些配置

1
2
3
4
5
6
plugins: [
new MiniCssExtractPlugin({
filename:'[name].css',
chunkFilename:'[name].chunk.css'
})
]

我们会发现打包出来的css文件是会直接走filename这个配置项目的,因为我们打包出来的index.html文件会直接对这个css文件去进行一些引用.

新建一个style1.css,在里面写上一些个样式,会发现在打包的时候,这个插件会把两个css文件整合到一起.

但是由于打包出来的css代码并没有被压缩,因而我们需要使用一个新的插件:

npm install optimize-css-assets-webpack-plugin -D

然后在webpack.prod.js里面引入这个包

1
2
3
4
5
6
7
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
/**
some codes ...
*/
optimization:{
minimizer:[new OptimizeCSSAssetsPlugin()]
}

新增完上面的配置项之后,再重新对代码进行打包,然后打包出来的css文件就是被压缩过的了.

-------------本文结束感谢您的阅读-------------