webpack学习第十四步——css代码分割及压缩

修改chunkname

• 修改webpack.common.js

output: {
    path: path.resolve(__dirname, '../build'),
    filename: '[name].js',
    // 增加chunkFilename
    chunkFilename: "[name].chunk.js"
},

• 修改index.js,并将splitChunks修改为all

import _ from 'lodash'
document.addEventListener('click',() => {
    import(/* webpackPrefetch: true *//* webpackChunkName:'handleClick' */'./handleClick.js').then(({default: func}) => {
        func()
    })
})

• 打包后生成文件

css代码分割

• 之前学习中，css样式都是通过style-loader挂在到head里的
• 安装相关插件,因为它不支持HMR，因此只在线上环境使用

npm install mini-css-extract-plugin -D

• 修改config内容

// webpack.common.js中对css相关的处理放到webpack.dev.js和webpack.prod.js中

// webpack.dev.js增加对css普通处理
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        }
    ]
}

// 修改webpack.prod.js
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const prodConfig = {
    mode: "production",
    devtool: "cheap-module-source-map",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                // 使用MiniCssExtractPlugin的loader
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin()
    ]

}

module.exports = merge(commonConfig,prodConfig)

• 修改index.js,index.js只引入样式文件

import './style.css'

• 新建style.css文件

body{
    background: green;
}

• 此时打生产包npm run build

• 之所以没有将css文件打成单独的文件，是因为生产包默认使用tree-shaking,所以我们还要修改package.json文件

// 表示对css文件不使用treeShaking,因为css文件的引入方式是import ./style.css，不是模块化的方式
"sideEffects": [
    "*.css"
]

• 打生产包

• 页面会请求单独的css文件

• index.js引入多个样式文件

  • 新建style2.css

  body {
      margin: 0;
  }
  

  • 引入多个样式文件

  import './style.css'
  import './style2.css'
  

  • 样式会打包到一个文件
  

css代码分割配置

• 可以设置文件名称

plugins:[
    new MiniCssExtractPlugin({
        filename: 'style.css',
        // filename: '[name].css'
    })
]

css代码压缩

• 安装插件

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

• 修改webpack.prod.js

const merge = require('webpack-merge')
const commonConfig = require('./webpack.common')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsbpackPlugin = require('optimize-css-assets-webpack-plugin')
const prodConfig = {
    mode: "production",
    devtool: "cheap-module-source-map",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    optimization: {
    // 使用插件进行css代码压缩
        minimizer: [new OptimizeCssAssetsbpackPlugin({})]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name].chunk.css'
        })
    ]

}

module.exports = merge(commonConfig,prodConfig)

• 打包后css被压缩