1.打包css

2.打包逻辑

1-1.webpack打包css逻辑

 非js文件打包 需要对应的loadercss-loader将css转化为jsstyle-loader把包含css内容的js代码 挂载到页面的<style>标签引入css（import "./css/main.css"）安装（npm i css-loader style-loader -D）配置后缀名 ：test:/\.css$/i指定加载器 ：use:['style-loader','css-loader']webpack打包cssloader执行顺序：先右后左（先下后上）

3.打包css

先是创建一个main.css,我们在main.css写上我们自己所需要的样式

我们在切换到indx.js中把我们刚刚写的css样式引入到index.js里面

我们看到看到 报错 报错内容是我们的css不被识别 我们需要安装一个插件

npm i -D css-loader style-loader

我们安装好以后但是还是识别不了我们需要去做一个配置

这时我们在输入webpack就会发现没有报错了

你会发现这里面有我们刚写的css样式

我们创建一个新的文件夹 起名叫index.html 里面引入我们打包后的js

serve

打开项目

我们可以看到local 后面5000 打开以后

这时我们就会发现 我们设置好的css样式在我们下载插件 配置完之后 可以看到我们的样式出来了

4.打包成独立的css文件

安装插件 npm install mini-css-extract-plugin -D
引入插件  const MiniCssExtractPlugin=require('mini-css-extract-plugin')
替换style-loader(use:['MiniCssExtractPlugin.loader','css-loader'])
style-loader:将css打包到<style>标签中      
配置插件（new MiniCssExtractPlugin({})）

我们需要在配置里面配置一些东西

将css打包成独立的文件中

插件配置

我们再次打包

这时我们可以看到我们打包里面生成了一个main.css

这时打开我们打包好的main.css里面可以看到我们一开始写的css样式

5.添加样式前缀

安装 npm install postcss-loader autoprefixer -D
配置 webpack.config.jsuse:['MiniCssExtractPlugin.loader','css-loader','postcss-loader']
新建 postcss.config.jsplugins:[require('autoprefixer')]
配置需要兼容的浏览器package.json中指定browserslist

在我们的css写入新的样式

安装我们需要的插件

通过postcss-loader给样式属性添加浏览器前缀

创建一个postcss.config.js 里面覆盖的浏览器

指定兼容规则 打包完以后

就会自动加上各种浏览器前缀

6.格式校验

stylelint :https://stylelint.io/
校验规则（number-leading-zero）
line-height: .5 错误
line-height : 0.5 正确
stylelint-config-standard:https://github.com/stylelint/stylelint-config-standard
stylelint-webpack-plugin :webpack5

我们需要安装两个文件就是我们上面说的


指定需要进行校验的文件

我们执行打包 就可以校验我们的了 当然以后可能也会用到了vue只需要加入即可

7.压缩css

安装 npm install optimize-css-assets-webpack-plugin -D
引入 optimazeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin')
配置 new OptimizeCssAssetsplugin()

安装

配置文件

压缩css

压缩完以后就是这个样子了

8.我们为什么要用这个打包工具呢

如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

…

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

9.webpack的打包顺序

Webpack 打包 流程 webpack 的编译都按照下面的钩子调用 顺序 执行 1、entry-option,初始化option 2、run,开始编译 3、make,从entry开始递归的分析依赖，对每个依赖模块进行build 4、before-resolve,对模块位置进行… 用vue cli2+nuxt做项目时，启动项目 webpack 报error级黄色警告错误，最后两段是 - couldn’t fulfill desired order of chunk group (s) pages_user_index（无法完成所需的块组 顺序 pages_user_index） - while …

10.总结

今天我们学习了打包需要引入插件 我们还知道了打包工具的好处 也了解到了webpack的打包顺序
今天呢 你们可以跟着我的操作一步步操作哦