css-6 df15,webpack 样式文件的代码分割(15)

获取全套webpack 4.x教程，请访问瓦力博客

在上一小节，我们将开发环境和生产环境区分开来。这一小节，我们来操作如何将样式文件的代码分割。

1.安装

yarn add mini-css-extract-plugin

此插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。

它建立在新的webpack v4功能(模块类型)之上，并且需要webpack 4才能工作。

注意:MiniCssExtractPlugin 目前不支持HMR support(热重载)

2.提取css

bulid/plugins.js

const srcPath = require('./base/path');

const config = require('./base/config');

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除

+ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //css样式提取

let plugins = [

new HtmlWebpackPlugin({

title: '瓦力博客',

template: srcPath.src + '/index.html' //以src/index.html为编译模板

}),

+new MiniCssExtractPlugin({

+filename: config.NODE_ENV == 'development'?'[name.css]': `${srcPath.css}/[name].[hash].css`,

+chunkFilename: config.NODE_ENV == 'development'?'[id].css': `${srcPath.css}/[id].[hash].css`

+}), //css提取

new CleanWebpackPlugin(),

new webpack.HotModuleReplacementPlugin()

]

module.exports = plugins;

build/module.js

const srcPath = require('./base/path');

const config = require('./base/config');

+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");

let _module = {

rules:[

{

test:/\.css$/,

use:[

+config.NODE_ENV == 'development'?'style-loader': MiniCssExtractPlugin.loader,

{

loader:'css-loader',

options:{

importLoaders:1

}

},

'postcss-loader'

]

},

{

test:/\.scss$/,

use:[

+config.NODE_ENV == 'development'?'style-loader': MiniCssExtractPlugin.loader,

{

loader:'css-loader',

options:{

importLoaders:2

}

},

'sass-loader',

'postcss-loader'

]

},

{

test: /\.less$/,

use: [

+config.NODE_ENV == 'development'?'style-loader': MiniCssExtractPlugin.loader,

{

loader:'css-loader',

options:{

importLoaders:2

}

},

'less-loader',

'postcss-loader'

]

},

{

test:/\.(png|svg|jpeg|jpg|gif)$/,

use:[

{

loader:'file-loader',

options:{

name:'[name][sha512:hash:base64:7].[ext]', //[path] 上下文环境路径

outputPath: srcPath.images, //输出路径

publicPath: config.NODE_ENV === 'development'?srcPath.images:srcPath.images //公共路径

}

},

{

loader: 'image-webpack-loader',

options: {

bypassOnDebug: true, // webpack@1.x

disable: true, // webpack@2.x and newer

},

},

]

},

{

test: /\.html$/,

use:[

{

loader:'html-loader',

options:{

arrts:['img:src','img:data-src'],

+minimize:config.NODE_ENV === 'development'? false:false //是否压缩html

}

}

]

},

{

test: /(iconfont.svg)|\.(woff|woff2|eot|ttf|otf)$/,

use:[

{

loader:'file-loader',

options:{

name:'[name].[ext]', //[path] 上下文环境路径

outputPath: srcPath.iconfont, //输出路径

publicPath: config.NODE_ENV === 'development'? srcPath.iconfont: srcPath.iconfont, //公共路径

}

}

]

},

{

test: /\.js$/,

exclude: /(node_modules|bower_components|lib)/,

loader: 'babel-loader'

}

]

}

module.exports = _module;

build/base/config.js

let _mode = process.argv[process.argv.length - 1];

let env = _mode.replace(/--mode=(.+)/g,"$1");

let config = {

NODE_ENV: env == 'development'?'development':'production', //development 开发 production 线上

+publicPath: env == 'development'?'./':'./',

apiUrl:'http://www.waliblog.com',

port: 9999

}

module.exports = config;

package.json

{

"name": "webpack",

"version": "1.0.0",

"description": "webpack测试",

"sideEffects": [

"*.css",

+"*.less",

+"*.scss"

],

"main": "index.js",

"author": "wali",

"private": true,

"license": "MIT",

"scripts": {

"dev": "npx webpack-dev-server --colors --mode=development",

"prod": "npx webpack --colors --mode=production",

"build": "npx webpack --colors --mode=development",

"analyse": "npx webpack --profile --json> stats.json --colors --mode=development"

},

"dependencies": {

"@babel/core": "^7.4.5",

"@babel/plugin-syntax-dynamic-import": "^7.2.0",

"@babel/plugin-transform-runtime": "^7.4.4",

"@babel/polyfill": "^7.4.4",

"@babel/preset-env": "^7.4.5",

"@babel/runtime": "^7.4.5",

"@babel/runtime-corejs2": "^7.4.5",

"autoprefixer": "^9.5.1",

"babel-loader": "^8.0.6",

"clean-webpack-plugin": "^3.0.0",

"css-loader": "^2.1.1",

"extract-text-webpack-plugin": "^3.0.2",

"file-loader": "^3.0.1",

"html-loader": "^0.5.5",

"html-webpack-plugin": "^3.2.0",

"image-webpack-loader": "^4.6.0",

"json5-loader": "^2.0.0",

"less": "^3.9.0",

"less-loader": "^5.0.0",

"loadsh": "^0.0.4",

"lodash": "^4.17.11",

"mini-css-extract-plugin": "^0.7.0",

"node-sass": "^4.12.0",

"postcss-loader": "^3.0.0",

"sass-loader": "^7.1.0",

"style-loader": "^0.23.1",

"webpack": "^4.32.0",

"webpack-cli": "^3.3.2",

"webpack-dev-server": "^3.4.1"

},

"devDependencies": {

"webpack-bundle-analyzer": "^3.3.2"

}

}

index.js

import './assets/css/index.css';

assets/css/index.css

h1{

color: blue;

}

运行webpack

yarn run prod

AAffA0nNPuCLAAAAAElFTkSuQmCC

打开dist/index.html,看到/assets/css/index.css文件样式生效了

AAffA0nNPuCLAAAAAElFTkSuQmCC

title

欢迎来到瓦力博客

从index.html文件中可以看到css文件被提取出来，并且被引用。

3.提取sass

上面配置已经写了，在plugins.js和module.js文件中配置了，这里就简单的验证一下

修改index.js

import './assets/sass/index.scss';

assets/sass/index.scss

body{

h1{

transform: translate(100px, 100px);

}

}

运行webpack

yarn run prod

打开dist/index.html发现欢迎来到瓦力博客几个字发生偏移，说明/assets/sass/index.scss样式已经生效

AAffA0nNPuCLAAAAAElFTkSuQmCC

4.提取less

上面配置已经写了，在plugins.js和module.js文件中配置了，这里就简单的验证一下

修改index.js

import './assets/less/index.less';

assets/less/index.less

body{

h1{

transform: rotate(90deg);

background: red;

text-align: center;

}

}

运行webpack

yarn run prod

打开dist/index.html发现欢迎来到瓦力博客几个字旋转90度，背景变红，字体居中，说明/assets/less/index.less样式已经生效

AAffA0nNPuCLAAAAAElFTkSuQmCC

5.生产环境css压缩

安装optimize-css-assets-webpack-plugin

yarn add optimize-css-assets-webpack-plugin

optimization.js

+ const config = require('./base/config');

+ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

let optimization = {

usedExports: true,

splitChunks: {

chunks: 'all',

minSize: 30000,

maxSize: 0,

minChunks: 1,

maxAsyncRequests: 5,

maxInitialRequests: 3,

automaticNameDelimiter: '~',

name: true,

cacheGroups: {

vendors: {

test: /[\\/]node_modules[\\/]/,

priority: -10

},

default: {

minChunks: 2,

priority: -20,

reuseExistingChunk: true

}

}

}

}

+if(config.NODE_ENV != 'development'){

+optimization['minimizer'] = [new OptimizeCssAssetsPlugin({})]

+}

module.exports = optimization

运行开发环境

yarn run build

发现没有发生什么改变，样式都在head标签内

运行生产环境

yarn run prod

发现dist目录下有css目录生成，打开css文件，看到css被压缩了。

6.总结

测试这小节其实遇到几个问题，小菜写出来：

调试

这小节的测试命令都变成yarn run prod，是测试生产环境下webpack配置，生产环境下css,less,scss都会被压缩，去注释，index.html文件也会被压缩，去注释，还要添加域名。这样一来从生成的文件方面就不容易看出webpack到底是否配置正确。所以小菜将config.js中修改

+publicPath: env == 'development'?'./':'./',

就是生成后index.html文件能直接在本地打开而不报错。

build/module.js修改

+minimize:config.NODE_ENV === 'development'? false:false //是否压缩html

生成后index.html文件不要被压缩，还保留树形结构，便于查找

less和scss文件样式不起作用

小菜起初测试css文件，发现打包后css样式被提取出来，样式也生效了，但是换成

import './assets/less/index.less';

//或

import './assets/sass/index.scss';

时，在运行打包命令时，样式没有被提取出来。后来经过认真分析，发现/webpack/2019/05/24/webpack-10.html一节中配置了Tree Shaking。Tree shaking作用就是当我在index.js文件中使用import './assets/less/index.less'写法时，会检测在js文件中是否使用了引入来的less，很明显在index.js文件中没有使用，只是单纯的引入，所以Tree shaking就会自动帮我们过滤掉这行代码，就导致最终生成的js文件中没有样式，也就提取不出来样式了。

看了上面的解释，有的小伙伴可能会问import './assets/css/index.css'也在index.js文件中只引用没有使用，为什么css文件中的样式就能够生效呢？原因还是在/webpack/2019/05/24/webpack-10.html一节中，小菜在package.json中配置了css，没有配置less,scss。

"sideEffects": [

"*.css",

+"*.less",

+"*.scss"

],

当我们配置*.css,*.less,*.scss后，在Tree shaking时，webpack就会知道忽略css,less,scss所有文件，即使在js文件中css,less,scss只引用没有使用，也不要删除这行代码。

7.代码回滚

build/module.js

- minimize:config.NODE_ENV === 'development'? false:false //是否压缩html

+ minimize:config.NODE_ENV === 'development'? false:true //是否压缩html

build/base/config.js

let _mode = process.argv[process.argv.length - 1];

let env = _mode.replace(/--mode=(.+)/g,"$1");

let config = {

NODE_ENV: env == 'development'?'development':'production', //development 开发 production 线上

-publicPath: env == 'development'?'./':'./',

+publicPath: env == 'development'?'./':'http://www.waliblog.com/',

apiUrl:'http://www.waliblog.com',

port: 9999

}

module.exports = config;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/301970.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

据说这是史上最牛逼的可视化神器

据说这是史上最牛逼的可视化神器

全世界只有3.14 % 的人关注了数据与算法之美我们粉丝里面有很多小伙伴喜欢玩数据分析，粗略估计有几千人。数据分析离不开数据可视化。比如我们前面介绍过pandas画图，matplotlib画图，pyecharts画图当然还有Tableau，今天推荐一款更牛…
阅读更多...
excel统计分析——S-W正态性检验

excel统计分析——S-W正态性检验

参考资料： [1]马兴华,张晋昕.数值变量正态性检验常用方法的对比[J].循证医学,2014,14(02):123-128. 统计推断——正态性检验（图形方法、偏度和峰度、统计（拟合优度）检验）_sm.distributions.ecdf-CSDN博客 【统计学】…
阅读更多...
怎能错过这个技术集市！转发有奖，惊喜连连！

怎能错过这个技术集市！转发有奖，惊喜连连！

点击蓝字 关注我们Learn. Connect. Code. 微软一年一度的Build大会即将拉开帷幕（5月25-27日），今年的主题演讲，全球CEO Satya Nadella将会深入我们的工作，探讨开发者速度，智能云原生应用，以及在…
阅读更多...
文件服务器搭建centos,centos8搭建ftp文件服务器

文件服务器搭建centos,centos8搭建ftp文件服务器

1.安装vsftpdyum install -y vsftpd2.执行以下命令设置FTP服务开机自启动systemctl enable vsftpd.service3.执行以下命令启动FTP服务systemctl start vsftpd.service4.执行以下命令创建ftp用户useradd ftpuser5.执行以下命令并按照提示设置“ftpuser"用户密码passwd ftpu…
阅读更多...
将历史、数学、语文、地理、政治知识融会贯通的诀窍就是它

将历史、数学、语文、地理、政治知识融会贯通的诀窍就是它

▲卢sir特别推荐点击上图进入玩酷屋在这个知识都是碎片化的时代，系统化的知识，显得弥足珍贵。今天小木就专门给大家推荐一套，将知识系统化整理，放到时间轴上展示的——《时间上的人物谱》里。这是一套特别的工具书，是一…
阅读更多...
Nginx实战部署常用功能演示(超详细版)，绝对给力~~~

Nginx实战部署常用功能演示(超详细版)，绝对给力~~~

前言上次分享了一些开发过程中常用的功能，但如果到真实环境中，其实还需要一些额外的配置，比如说跨域、缓存、配置SSL证书、高可用等，老规矩，还是挑几个平时比较常用的进行演示分享。上篇详见Nginx超详细常用功能演示&a…
阅读更多...
程序员，为什么给你50万年薪，你还要搞死我公司？

程序员，为什么给你50万年薪，你还要搞死我公司？

全世界只有3.14 % 的人关注了数据与算法之美小卢,今天看到一条让人吐血的新闻。1月20日，深圳市某互联网游戏公司程序员燕某在游戏上线测试的当天，锁死了服务器与电脑，并恶意失踪，致公司损失惨重的事在网上曝光并引起热议。这到底是…
阅读更多...
访问Web服务器时 使用的协议是,使用SOAP协议访问Web服务

访问Web服务器时 使用的协议是,使用SOAP协议访问Web服务

SOAP是简单对象访问协议，它可看成是HTTP与XML的结合，其中XML部分是作为HTTP报文的实体主体部分。SOAP：简单对象访问协议，是一种轻量的、简单的、基于 XML 的协议，它被设计成在 WEB 上交换结构化的和固化的信息。 SOAP …
阅读更多...
同时画多个饼图_手帐术 | 这个神奇饼图里，藏着时间管理的小秘诀

同时画多个饼图_手帐术 | 这个神奇饼图里，藏着时间管理的小秘诀

说起效率管理kk首先想到的就是时间饼了简直就是拖延症的救星啊！！！不仅能帮我们规划日程而且相比于时间轴来说可视化更强今天kk就来介绍一下时间饼的使用方法~时间饼类型时间饼一共分为几种12h、15h、18h、24h等时间越长分的越细12小时12h适合…
阅读更多...
【转】java io 总结(图)

【转】java io 总结(图)

2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/dlpinghailinfeng/blog/91191
阅读更多...
TensorFlow的各种应用，你晓得不？

TensorFlow的各种应用，你晓得不？

近几年，AI 的重大进展对我们的日常生活产生了积极影响。随着Google发布了《Google AI 原则》( Google AI Principles )，它们为 AI 发展提供了一个框架。由于这一领域的发展非常迅速，一些原则的最佳实践，如 “ 避免制造或加强不公平…
阅读更多...
6月开招｜工业互联才是王道，最高可达50k！

6月开招｜工业互联才是王道，最高可达50k！

就在昨天，工信部发布了《工业互联网十个典型应用场景和五个重点行业实践》，具体介绍10个典型场景及5个重点行业工业互联网的实际应用情况，可以看到国内工业互联网正在蓬勃发展，欣欣向荣，工业4.0的浪潮正在席卷整个行业…
阅读更多...
2018 年最受欢迎的 Python 库，你都用过吗？

2018 年最受欢迎的 Python 库，你都用过吗？

全世界只有3.14 % 的人关注了数据与算法之美前段时间，数据科学网站 KDnuggets 评选出了顶级 Python 库 Top15，领域横跨数据科学、数据可视化、深度学习和机器学习。推荐阅读《Python3.0科学计算指南》上图：根据 GitHub star 和贡献评选出的 2…
阅读更多...
登录服务器修改数据库吗,如何修改服务器登录数据库 sa

登录服务器修改数据库吗,如何修改服务器登录数据库 sa

如何修改服务器登录数据库 sa 内容精选换一换为确保华为云关系型数据库服务发挥出最优性能，用户可根据业务需求对用户创建的参数模板中的参数进行调整。您可以修改用户创建的数据库参数模板中的参数值，但不能更改默认数据库参数模板中的参数值。以下是您…
阅读更多...
用NSubstitute来mock

用NSubstitute来mock

Moq在.net中比较出名的mock框架，NSubstitute也是属于这类框架，使用方式也如出一辙，是通过实现子类来达到mock的效果。下面的测试方法都是按照 UnitTest的三板斧Arrange Act Assert来展开的，代码具体如下。using Microsoft.VisualB…
阅读更多...
ubuntu安装mysql_Ubuntu18.04下安装MySQL

ubuntu安装mysql_Ubuntu18.04下安装MySQL

提示：以下操作均在root用户下进行，如在普通用户，请自行加上sudo！# 查看有没有安装MySQL：dpkg -l | grep mysql# 安装MySQL：apt install mysql-server安装完成之后可以使用如下命令来检查是否安装成功&#…
阅读更多...
居家好物┃超好用的擦窗神器保护腰椎尾椎久坐不累的美臀坐垫

居家好物┃超好用的擦窗神器保护腰椎尾椎久坐不累的美臀坐垫

▲卢sir特别推荐点击上图进入玩酷屋春节即将来临，小木特地挑选了好几款超级好用的居家生活产品。第一款：擦外窗神器， 颠覆你擦窗方式！双面长柄 可伸缩 可折叠 可旋转便携擦玻璃神器第二款：天然抗菌除螨毛巾&#xff0c…
阅读更多...
【读书笔记】《编写高效的JavaScript程序》

【读书笔记】《编写高效的JavaScript程序》

为什么80%的码农都做不了架构师？>>> 看到一篇文章，http://www.csdn.net/article/2012-11-20/2811887-writing-fast-memory-efficient-javascript/2 里面有个网页针对 原型链，模块化，模块化加缓存，进行了比…
阅读更多...
Cloudera将被私有化，Hadoop时代或将落幕

Cloudera将被私有化，Hadoop时代或将落幕

北京时间 6 月 1 日晚，据 TechCrunch 报道 [1]，KKR 和 CD&R 将以 53 亿美元收购 Cloudera，Cloudera 将被私有化。截止到本文发稿时（11 点 49 分），Cloudera 股票报价 15.94 美元，涨幅 23.95%…
阅读更多...
mysql group_concat去重_MySQL group_concat() 函数用法

mysql group_concat去重_MySQL group_concat() 函数用法

MySQL group_concat() 函数用法在使用 group by对数据进行分组后，如果需要对 select 的数据项进行字符串拼接，这时就需要用到group_concat()函数。1、基本用法group_concat()完整语法如下：group_concat([DISTINCT] 要连接的字段 [Order BY AS…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023