直接根据上篇的案例继续编写，不要每次都新建一个demo了，上篇-> 掘金课程《Webpack5 核心原理与应用实践》学习笔记

如何借助预处理器、PostCSS 等构建现代 CSS 工程环境？

1. webpack 如何处理 css 资源？

原生webpack并不认识css，如果直接在.js文件中直接引入.css文件，会导致编译失败。

src下面新建一个index.css文件，里面随便写点代码。

// index.css
body {
    background: pink;
}

index.js文件里面引入index.css

// index.js
import './index.css'
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.map(item => item)

虽然上节配置好了ts的环境，但是以后的课程如果没有一定指定ts就还是使用.js，这里只是学习webpack，ts准备这节完成再继续专精

命令行：npx webpack ，可以看到会编译失败

2. `webpack`处理`css`的`loader`

webpack处理css的loader通常会用到如下：

css-loader：该 Loader 会将 CSS 等价翻译为形如 module.exports = "${css}" 的JavaScript 代码，使得 Webpack 能够如同处理 JS 代码一样解析 CSS 内容与资源依赖；
style-loader：该 Loader 将在产物中注入一系列 runtime 代码，这些代码会将 CSS 内容注入到页面的 </code> 标签，使得样式生效；</li><li><code>mini-css-extract-plugin</code>：该插件会将 CSS 代码抽离到单独的 <code>.css</code> 文件，并将文件通过 <code><link></code> 标签方式插入到页面中。</li></ul><div><br /></div><blockquote><div>当 Webpack 版本低于 5.0 时，请使用 <code>extract-text-webpack-plugin</code> 代替 <code>mini-css-extract-plugin</code>。</div></blockquote><h2 id="z2VNe">3. 配置<code>webpack</code></h2><div data-card-type="block" data-ready-card="hr"></div><ul><li>安装依赖</li></ul><div><br /></div><ul data-lake-indent="1"><li>命令行：<code>npm i -D css-loader style-loader</code></li><li><code>webpack.config.js</code>添加配置</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22const%20path%20%3D%20require('path')%3B%5Cnconst%20EslintPlugin%20%3D%20require('eslint-webpack-plugin')%3B%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20mode%3A%20'development'%2C%5Cn%20%20%20%20entry%3A%20%7B%5Cn%20%20%20%20%20%20%20%20index%3A%20'.%2Fsrc%2Findex.js'%2C%5Cn%20%20%20%20%20%20%20%20test%3A%20'.%2Fsrc%2Ftest.ts'%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20output%3A%20%7B%5Cn%20%20%20%20%20%20%20%20filename%3A%20'%5Bname%5D.js'%2C%5Cn%20%20%20%20%20%20%20%20path%3A%20path.resolve(__dirname%2C%20'dist')%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.js%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20'babel-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20presets%3A%20%5B'%40babel%2Fpreset-env'%2C%20'%40babel%2Fpreset-typescript'%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.ts%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20'ts-loader'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%A4%84%E7%90%86css%E7%9A%84loader%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.css%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B'style-loader'%2C%20'css-loader'%5D%20%2F%2F%20%E8%BF%99%E9%87%8Ccss-loader%E9%9C%80%E8%A6%81%E5%86%99%E5%88%B0%E5%90%8E%E9%9D%A2%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20resolve%3A%20%7B%5Cn%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20EslintPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%5Cn%20%20%20%20%20%20%20%20%7D)%5Cn%20%20%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22ez8sH%22%7D"></div><div><br /></div><blockquote><div>这里先用只有<code>css-loader</code>和<code>style-loader</code>，<code>loader</code>的加载顺序是从后往前，后面一个处理完成之后，会把结果抛给前面的<code>loader</code>再进行下一步的处理。</div><div><code>css-loader</code>只会把<code>css</code>放到<code>.js</code>文件中，不会对样式产生作用，所以需要<code>style-loader</code>进行下一步处理。</div><div><code>style-loader</code>会把<code>css</code>拿出来，然后创建<code><style></code>标签，并插入到<code><head></code>中。</div></blockquote><div><br /></div><ul data-lake-indent="1"><li>命令行：<code>npx webpack</code></li><li>这里编译成功后，可以看到没有<code>.css</code>结尾的文件，因为<code>css</code>生成在<code>.js</code>文件中了，感兴趣可以找找看。</li></ul><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F4vg2hxwwvzq22_58d9b12157e24e628dec4c5c8b1fbf16.png%22%2C%22originWidth%22%3A706%2C%22originHeight%22%3A331%2C%22name%22%3A%22image.png%22%2C%22size%22%3A63210%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A706%2C%22height%22%3A331%7D"></span></div><h3 id="4jKLI">生产环境</h3><div><br /></div><blockquote><div>上面将<code>css</code>放到<code>.js</code>文件中，无疑是会增加包的体积，这样会产生很多问题。</div><ol><li><code>css</code>、<code>js</code>并存，无法并行加载，只是在<code>js</code>线程中加载。<br /></li><li>包体积变大，影响加载时间（可以分包解决）。<br /></li><li><code>css</code>、<code>js</code>随便一者发生修改，就会丢失浏览器缓存能力。<br /></li></ol><div>说白了就是影响首屏加载时间。</div><div>所以在生产环境中使用<code>mini-css-extract-plugin</code>代替<code>style-loader</code>。</div></blockquote><div><br /></div><ul><li>安装<code>mini-css-extract-plugin</code></li></ul><ul data-lake-indent="1"><li>命令行：<code>npm i -D mini-css-extract-plugin html-webpack-plugin</code></li></ul><div><code><br /></code></div><blockquote><div><code>mini-css-extract-plugin</code>需要搭配<code>html-webpack-plugin</code>来使用，所以这里需要安装两个。</div></blockquote><div><br /></div><ul data-lake-indent="1"><li>配置<code>webpack.config.js</code></li></ul><div><code><br /></code></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22const%20path%20%3D%20require('path')%3B%5Cnconst%20EslintPlugin%20%3D%20require('eslint-webpack-plugin')%3B%5Cnconst%20MiniCssExtractPlugin%20%3D%20require('mini-css-extract-plugin')%3B%20%2F%2F%20%E5%BC%95%E5%85%A5mini-css-extract-plugin%5Cnconst%20HTMLWebpackPlugin%20%3D%20require('html-webpack-plugin')%3B%20%2F%2F%20%E5%BC%95%E5%85%A5html-webpack-plugin%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20mode%3A%20'development'%2C%5Cn%20%20%20%20entry%3A%20%7B%5Cn%20%20%20%20%20%20%20%20index%3A%20'.%2Fsrc%2Findex.js'%2C%5Cn%20%20%20%20%20%20%20%20test%3A%20'.%2Fsrc%2Ftest.ts'%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20output%3A%20%7B%5Cn%20%20%20%20%20%20%20%20filename%3A%20'%5Bname%5D.js'%2C%5Cn%20%20%20%20%20%20%20%20path%3A%20path.resolve(__dirname%2C%20'dist')%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.js%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20'babel-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20presets%3A%20%5B'%40babel%2Fpreset-env'%2C%20'%40babel%2Fpreset-typescript'%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.ts%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20'ts-loader'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.css%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(process.env.NODE_ENV%20%3D%3D%3D%20'development'%20%3F%20'style-loader'%20%3A%20MiniCssExtractPlugin.loader)%20%2F%2F%20%E6%A0%B9%E6%8D%AE%E8%BF%90%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%88%A4%E6%96%AD%E4%BD%BF%E7%94%A8%E5%93%AA%E4%B8%AAloader%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2C%20'css-loader'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20resolve%3A%20%7B%5Cn%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20EslintPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%5Cn%20%20%20%20%20%20%20%20%7D)%2C%5Cn%20%20%20%20%20%20%20%20new%20MiniCssExtractPlugin()%2C%20%2F%2F%20%E4%BD%BF%E7%94%A8MiniCssExtractPlugin%5Cn%20%20%20%20%20%20%20%20new%20HTMLWebpackPlugin()%20%2F%2F%20%E4%BD%BF%E7%94%A8HTMLWebpackPlugin%5Cn%20%20%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22tDtcn%22%7D"></div><div><br /></div><blockquote><ul><li><code>mini-css-extract-plugin</code> 库同时提供 Loader、Plugin 组件，需要同时使用</li><li><code>mini-css-extract-plugin</code> 不能与 <code>style-loader</code> 混用，否则报错，所以上述示例中需要判断 <code>process.env.NODE_ENV</code> 环境变量决定使用那个 Loader</li><li><code>mini-css-extract-plugin</code> 需要与 <code>html-webpack-plugin</code> 同时使用，才能将产物路径以 <code>link</code> 标签方式插入到 html 中</li></ul></blockquote><div><br /></div><ul data-lake-indent="1"><li>命令行：<code>npx webpack</code></li><li>会生成对应的<code>.html</code>、<code>.css</code>、<code>.js</code>文件</li><li>可以打开<code>.html</code>文件看看内容，同时也可以运行一下<code>.html</code>看看样式是否生效，<code>js</code>文件是否正常加载。</li></ul><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F4vg2hxwwvzq22_1ba96b65d0f74bfdb30a58efabf51672.png%22%2C%22originWidth%22%3A702%2C%22originHeight%22%3A210%2C%22name%22%3A%22image.png%22%2C%22size%22%3A59923%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A702%2C%22height%22%3A210%7D"></span></div><h2 id="dGzXP">css预处理器</h2><div data-card-type="block" data-ready-card="hr"></div><blockquote><div><code>css</code>发展这么多年，性能，功能什么的已经突飞猛进，但是对于循环、分支判断、扩展复用、函数、嵌套之类的特性还是缺失的，以至于原生 CSS 已经难以应对当代复杂 Web 应用的开发需求。</div><div>于是社区就产出了功能更强大的 CSS 预处理器，，比较知名的有 <code>Less</code>、<code>Sass</code>、<code>Stylus</code>。</div><div>这些工具各有侧重，但都在 CSS 之上补充了扩展了一些逻辑判断、数学运算、嵌套封装等特性，基于这些特性，我们能写出复用性、可读性、可维护性更强，条理与结构更清晰的样式代码。</div><div>本节主要讲<code>Less</code></div></blockquote><div><br /></div><ul><li>安装依赖</li></ul><ul data-lake-indent="1"><li>命令行： <code>npm i -D less less-loader</code></li><li>配置<code>webpack.config.js</code></li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22const%20path%20%3D%20require('path')%3B%5Cnconst%20EslintPlugin%20%3D%20require('eslint-webpack-plugin')%3B%5Cnconst%20MiniCssExtractPlugin%20%3D%20require('mini-css-extract-plugin')%3B%5Cnconst%20HTMLWebpackPlugin%20%3D%20require('html-webpack-plugin')%3B%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20mode%3A%20'development'%2C%5Cn%20%20%20%20entry%3A%20%7B%5Cn%20%20%20%20%20%20%20%20index%3A%20'.%2Fsrc%2Findex.js'%2C%5Cn%20%20%20%20%20%20%20%20test%3A%20'.%2Fsrc%2Ftest.ts'%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20output%3A%20%7B%5Cn%20%20%20%20%20%20%20%20filename%3A%20'%5Bname%5D.js'%2C%5Cn%20%20%20%20%20%20%20%20path%3A%20path.resolve(__dirname%2C%20'dist')%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E7%9C%81%E6%8E%89%E4%BA%86%E4%B9%8B%E5%89%8D%E7%9A%84%E9%85%8D%E7%BD%AE%EF%BC%8Cless%E5%8F%AA%E9%9C%80%E8%A6%81%E4%B8%8B%E9%9D%A2%E7%9A%84%E9%85%8D%E7%BD%AE%E5%B0%B1%E5%8F%AF%E4%BB%A5%E4%BA%86%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.less%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'style-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'css-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'less-loader'%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20resolve%3A%20%7B%5Cn%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20EslintPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%5Cn%20%20%20%20%20%20%20%20%7D)%2C%5Cn%20%20%20%20%20%20%20%20new%20MiniCssExtractPlugin()%2C%5Cn%20%20%20%20%20%20%20%20new%20HTMLWebpackPlugin()%5Cn%20%20%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22ofnEH%22%7D"></div><ul data-lake-indent="1"><li>创建<code>.less</code>文件</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E5%8F%98%E9%87%8F%5Cn%40size%3A%2012px%3B%5Cn%40color%3A%20%23006633%3B%5Cn%2F%2F%20%E6%B7%B7%E5%90%88%5Cn.mx-bordered()%20%7B%5Cn%20%20border%3A%201px%20solid%20%23000%3B%5Cn%7D%5Cn%2F%2F%20%E5%B5%8C%E5%A5%97%5Cnbody%20%7B%5Cn%20%20%2F%2F%20%E5%87%BD%E6%95%B0%E8%AE%A1%E7%AE%97%5Cn%20%20background%3A%20spin(lighten(%40color%2C%2025%25)%2C%208)%3B%5Cn%20%20font-weight%3A%20bold%3B%5Cn%20%20padding%3A%20%40size%3B%5Cn%20%20.main%20%7B%5Cn%20%20%20%20%2F%2F%20%E6%95%B0%E5%AD%A6%E8%BF%90%E7%AE%97%5Cn%20%20%20%20font-size%3A%20%40size%20*%202%3B%5Cn%20%20%20%20.mx-bordered%3B%5Cn%20%20%20%20color%3A%20darken(%40color%2C%2010%25)%3B%5Cn%20%20%20%20padding%3A%20%40size%20*%200.6%3B%5Cn%20%20%7D%5Cn%7D%22%2C%22id%22%3A%224Xnmo%22%7D"></div><ul data-lake-indent="1"><li><code>index.js</code>引入<code>.less</code>文件</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22import%20'.%2Findex.css'%5Cnimport%20'.%2Findex.less'%5Cnconst%20list%20%3D%20%5B1%2C%202%2C%203%2C%204%2C%205%2C%206%2C%207%2C%208%2C%209%5D%3B%5Cnlist.map(item%20%3D%3E%20item)%22%2C%22id%22%3A%22DILsS%22%7D"></div><ul data-lake-indent="1"><li>编译，命令行输入：<code>npx webpack</code></li><li>运行生成后的<code>index.html</code>文件查看效果</li></ul><blockquote><div>除了less，其他的两种接入的方式也很简单</div><div><code>Sass</code>：<code>npm i -D sass-loader</code></div><div><code>Stylus</code>: <code>npm i -D stylus-loader</code></div><div><code>webpack.config.js</code>配置也很一样，就是把<code>less</code>换成对应的名字就好了。</div></blockquote><div><br /></div><h2 id="RuPyQ">使用 post-css</h2><div data-card-type="block" data-ready-card="hr"></div><blockquote><div><code>post-css</code>是什么？</div><div><code>post-css</code>就会说<code>css</code>版的<code>babel</code>，不同的是<code>babel</code>会改造或者创建<code>js</code>语法为兼容低版本的<code>js</code>语法，<code>post-css</code>就是增加兼容性前缀。</div></blockquote><ul><li>使用<code>post-css</code></li></ul><div><code><br /></code></div><ul data-lake-indent="1"><li>安装依赖</li><li>命令行：<code>npm i -D postcss postcss-loader autoprefixer</code></li><li>配置<code>webpack.config.js</code></li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22const%20path%20%3D%20require('path')%3B%5Cnconst%20EslintPlugin%20%3D%20require('eslint-webpack-plugin')%3B%5Cnconst%20MiniCssExtractPlugin%20%3D%20require('mini-css-extract-plugin')%3B%5Cnconst%20HTMLWebpackPlugin%20%3D%20require('html-webpack-plugin')%3B%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20mode%3A%20'development'%2C%5Cn%20%20%20%20entry%3A%20%7B%5Cn%20%20%20%20%20%20%20%20index%3A%20'.%2Fsrc%2Findex.js'%2C%5Cn%20%20%20%20%20%20%20%20test%3A%20'.%2Fsrc%2Ftest.ts'%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20output%3A%20%7B%5Cn%20%20%20%20%20%20%20%20filename%3A%20'%5Bname%5D.js'%2C%5Cn%20%20%20%20%20%20%20%20path%3A%20path.resolve(__dirname%2C%20'dist')%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.css%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(process.env.NODE_ENV%20%3D%3D%3D%20'development'%20%3F%20'style-loader'%20%3A%20MiniCssExtractPlugin.loader)%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20%5C%22css-loader%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20importLoaders%3A%201%20%2F%2F%20%E4%B8%BB%E8%A6%81%E6%98%AF%E7%94%A8%E6%9D%A5%E5%A4%84%E7%90%86%40import%E5%BC%95%E5%85%A5%E7%9A%84css%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%B8%8D%E5%8A%A0%E8%BF%99%E4%B8%AA%EF%BC%8C%40import%E5%BC%95%E5%85%A5%E7%9A%84css%E4%B8%8D%E4%BC%9A%E8%A2%ABpostcss-loader%E5%A4%84%E7%90%86%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20%5C%22postcss-loader%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20postcssOptions%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%B7%BB%E5%8A%A0%20autoprefixer%20%E6%8F%92%E4%BB%B6%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20plugins%3A%20%5Brequire(%5C%22autoprefixer%5C%22)%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20resolve%3A%20%7B%5Cn%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20new%20EslintPlugin(%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20extensions%3A%20%5B'.ts'%2C%20'.js'%5D%5Cn%20%20%20%20%20%20%20%20%7D)%2C%5Cn%20%20%20%20%20%20%20%20new%20MiniCssExtractPlugin()%2C%5Cn%20%20%20%20%20%20%20%20new%20HTMLWebpackPlugin()%5Cn%20%20%20%20%5D%5Cn%7D%22%2C%22id%22%3A%22eQRGi%22%7D"></div><div><br /></div><ul data-lake-indent="1"><li>完了之后在<code>.css</code>文件中写点新颖的<code>css</code>，例如伪类<code>::placeholder</code></li><li>然后<code>npx webpack</code></li><li>然后就可以查看生成的<code>.css</code>文件的内容了</li></ul><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F4vg2hxwwvzq22_2bdc02acc24f436583c9bbe3c691fbdb.png%22%2C%22originWidth%22%3A701%2C%22originHeight%22%3A288%2C%22name%22%3A%22image.png%22%2C%22size%22%3A108905%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A701%2C%22height%22%3A288%7D"></span></div><ul><li><code>post-css</code>的配置可以单独抽离出来处理</li></ul><div><br /></div><ul data-lake-indent="1"><li>创建<code>postcss.config.js</code>，内容如下：</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22module.exports%20%3D%20%7B%5Cn%20%20%20%20plugins%3A%20%5B%5Cn%20%20%20%20%20%20%20%20require(%5C%22autoprefixer%5C%22)%5Cn%20%20%20%20%5D%2C%5Cn%7D%3B%22%2C%22id%22%3A%22L5O1P%22%7D"></div><ul data-lake-indent="1"><li>然后<code>webpack.config.js</code>就可以下面这样了</li></ul><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E7%9C%81%E7%95%A5%E5%85%B6%E4%BB%96%E7%9A%84%E9%85%8D%E7%BD%AE%5Cnmodule.exports%20%3D%20%7B%5Cn%20%20%20%20module%3A%20%7B%5Cn%20%20%20%20%20%20%20%20rules%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.css%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20(process.env.NODE_ENV%20%3D%3D%3D%20'development'%20%3F%20'style-loader'%20%3A%20MiniCssExtractPlugin.loader)%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20%5C%22css-loader%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20importLoaders%3A%201%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'postcss-loader'%2C%20%2F%2F%20%E5%8F%AF%E4%BB%A5%E4%B8%8D%E5%8A%A0%E9%85%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%AE%80%E5%86%99%E4%BA%86%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20test%3A%20%2F.less%24%2F%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20use%3A%20%5B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'style-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20loader%3A%20%5C%22css-loader%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%3A%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20importLoaders%3A%201%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'postcss-loader'%2C%20%2F%2F%20%E5%92%8C%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8%E6%98%AF%E5%85%BC%E5%AE%B9%E7%9A%84%EF%BC%8C%E4%BD%86%E6%98%AF%E9%9C%80%E8%A6%81%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8%E5%A4%84%E7%90%86%E5%AE%8C%E4%BA%86%E4%B9%8B%E5%90%8E%E5%86%8D%E7%BB%99%E5%AE%83%E5%A4%84%E7%90%86%E5%93%9F%EF%BC%8C%E4%B8%8D%E8%A6%81%E5%BC%84%E9%94%99%E9%A1%BA%E5%BA%8F%E4%BA%86%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'less-loader'%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%20%20%20%20%5D%5Cn%20%20%20%20%7D%2C%5Cn%7D%22%2C%22id%22%3A%22AHubL%22%7D"></div><h2 id="ixXwg">总结</h2><div data-card-type="block" data-ready-card="hr"></div><blockquote><div>总结都是课程里面的，自己的总结就是配置好了，可以使用了，后面默认都知道我的总结了</div></blockquote><div><br /></div><div>本文介绍 <code>css-loader</code>、<code>style-loader</code>、<code>mini-css-extract-plugin</code>、<code>less-loader</code>、<code>postcss-loader</code> 等组件的功能特点与接入方法，内容有点多，重点在于：</div><div><br /></div><ul><li>Webpack 不能理解 CSS 代码，所以需要使用 <code>css-loader</code>、<code>style-loader</code>、<code>mini-css-extract-plugin</code> 三种组件处理样式资源；</li><li>Less/Sass/Stylus/PostCSS 等工具可弥补原生 CSS 语言层面的诸多功能缺失，例如数值运算、嵌套、代码复用等。</li></ul><div><br /></div><div>这些工具几乎已经成为现代 Web 应用开发的标配，能够帮助我们写出更清晰简洁、可复用的样式代码，帮助我们解决诸多与样式有关的工程化问题。</div><div id="__reading__mode__content_end_mark_container_id" style="background-color: #FCFCFC;"><br /></div>

《Webpack5 核心原理与应用实践》学习笔记->处理CSS

如何借助预处理器、PostCSS 等构建现代 CSS 工程环境？

1. webpack 如何处理 css 资源？

2. `webpack`处理`css`的`loader`

热门文章

最新文章

相关课程

相关电子书

相关实验场景

《Webpack5 核心原理与应用实践》学习笔记->处理CSS

如何借助预处理器、PostCSS 等构建现代 CSS 工程环境？

1. webpack 如何处理 css 资源？

2. webpack处理css的loader

热门文章

最新文章

相关课程

相关电子书

相关实验场景

2. `webpack`处理`css`的`loader`