webpack4.29.x成神之路(十九) css代码分割

栏目: CSS · 发布时间: 5年前

内容简介:上节:懒加载上节目录如下:

目录

上节:懒加载

上节目录如下:

webpack4.29.x成神之路(十九) css代码分割

css代码分割一般用于生产环境,先修改src/index.js:

import './styles/index.less';
import _ from 'lodash';

const root = document.getElementById('root');
root.innerText = _.join(['hello', 'webpack']);

styles/index.less:

#root{
  color: blue;
}

然后npm run build,浏览器运行bundles/index.html:

webpack4.29.x成神之路(十九) css代码分割

现在样式是通过style标签内联在页面上的。

现在修改配置,让样式通过link标签外部引入:

webpack/webpack.prod.js:

const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: [{
        loader: MiniCssExtractPlugin.loader,
      }, 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
});

安装mini-css-extract-plugin:npm i mini-css-extract-plugin -D

然后打包npm run build:

webpack4.29.x成神之路(十九) css代码分割

生成了单独的css文件,浏览器运行bundles/index.html, 打开f12:

webpack4.29.x成神之路(十九) css代码分割

这样就实现了link的外部引入

详细配置参考: https://webpack.js.org/plugin...

下节:shiming(待更新)


以上所述就是小编给大家介绍的《webpack4.29.x成神之路(十九) css代码分割》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

浪潮之巅(第2版)(套装上下册)

浪潮之巅(第2版)(套装上下册)

吴军 / 人民邮电出版社 / 2013-7 / 80.00元

一个企业的发展与崛起,绝非只是空有领导强人即可达成。任何的决策、同期的商业环境,都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书,除了讲述科技顶尖企业的发展规律,对于华尔街如何左右科技公司,以及金融风暴对科技产业的冲击,也多有着墨。此外,这本书也着力讲述很多尚在普及或将要发生的,比如微博和云计算,以及对下一代互联网科技产业浪潮的判断和预测。因为在极度商业化的今天,科技的进步和商机是分不开的。 ......一起来看看 《浪潮之巅(第2版)(套装上下册)》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

SHA 加密
SHA 加密

SHA 加密工具