内容简介:上节:懒加载上节目录如下:
上节:懒加载
上节目录如下:
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:
现在样式是通过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:
生成了单独的css文件,浏览器运行bundles/index.html, 打开f12:
这样就实现了link的外部引入
详细配置参考: https://webpack.js.org/plugin...
下节:shiming(待更新)
以上所述就是小编给大家介绍的《webpack4.29.x成神之路(十九) css代码分割》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Webpack:代码分割
- React服务端渲染(代码分割和数据预取)
- webpack4系列教程(六):使用SplitChunksPlugin分割代码
- 从零开始实现穿衣图像分割完整教程(附python代码演练)
- webpack4.29.x成神之路(十五) 代码分割(code spliting)上
- CVPR2019| 12篇CVPR论文开源代码(DeepFashion2/语义分割/人脸数据集基准等)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
浪潮之巅(第2版)(套装上下册)
吴军 / 人民邮电出版社 / 2013-7 / 80.00元
一个企业的发展与崛起,绝非只是空有领导强人即可达成。任何的决策、同期的商业环境,都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书,除了讲述科技顶尖企业的发展规律,对于华尔街如何左右科技公司,以及金融风暴对科技产业的冲击,也多有着墨。此外,这本书也着力讲述很多尚在普及或将要发生的,比如微博和云计算,以及对下一代互联网科技产业浪潮的判断和预测。因为在极度商业化的今天,科技的进步和商机是分不开的。 ......一起来看看 《浪潮之巅(第2版)(套装上下册)》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
SHA 加密
SHA 加密工具