内容简介:上节:懒加载上节目录如下:
上节:懒加载
上节目录如下:
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/语义分割/人脸数据集基准等)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
光线跟踪算法技术
萨芬 / 刘天慧 / 清华大学出版社 / 2011-3 / 98.00元
《光线跟踪算法技术》详细阐述了与光线跟踪问题相关的高效解决方案及相应的数据结构和算法,主要包括采样技术、投影视图、视见系统、景深、非线性投影、立体视觉、光照与材质、镜面反射、光泽反射、全局光照、透明度、阴影、环境遮挡、区域光照、光线与对象间的相交计算、对象变换、栅格技术以及纹理映射技术等内容。此外,《光线跟踪算法技术》还提供了相应的算法、代码以及伪代码,以帮助读者进一步理解计算方案的实现过程。 ......一起来看看 《光线跟踪算法技术》 这本书的介绍吧!