webpack4+babel7入门到精通（二、样式的处理）
2023-12-17 01:37:14
一、webpack 使用 CSS 样式
- 安装包
首先，我们需要安装必要的包。
npm install --save-dev webpack webpack-cli css-loader style-loader
- 在 webpack.config.js 中的 module 配置规则
接下来，我们需要在 webpack.config.js 文件中的 module 配置规则中添加一条规则来处理 CSS 文件。
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
- 在 src 中创建一个 css 的文件夹，里面创建 a.css 文件
最后，我们需要在 src 文件夹中创建一个 css 文件夹，并在其中创建一个 a.css 文件。
a.css
body {
background-color: red;
}
- 运行 webpack
现在，我们可以运行 webpack 来编译我们的代码。
webpack
编译完成后，会在 dist 文件夹中生成一个 main.css 文件。
dist
main.css
二、使用不同的样式预处理器
除了 CSS 之外，webpack 还支持多种样式预处理器，如 Sass、Less 和 Stylus。
- 安装包
首先，我们需要安装必要的包。
npm install --save-dev sass-loader node-sass less-loader less stylus-loader stylus
- 在 webpack.config.js 中的 module 配置规则
接下来，我们需要在 webpack.config.js 文件中的 module 配置规则中添加一条规则来处理 Sass、Less 或 Stylus 文件。
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.styl$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
}
]
}
- 在 src 中创建相应的文件夹，里面创建相应的样式文件
最后，我们需要在 src 文件夹中创建相应的文件夹，并在其中创建相应的样式文件。
scss
a.scss
body {
background-color: red;
}
less
a.less
body {
background-color: red;
}
stylus
a.styl
body
background-color red
- 运行 webpack
现在，我们可以运行 webpack 来编译我们的代码。
webpack
编译完成后，会在 dist 文件夹中生成一个 main.css 文件。
dist
main.css
三、提高样式处理性能的技巧
- 使用 CSS 模块
CSS 模块是一种新的 CSS 规范，它允许你将 CSS 样式与 JavaScript 模块相结合。这使得你可以将样式与组件解耦，并提高样式的复用性。
- 使用 PostCSS
PostCSS 是一个 CSS 构建工具，它允许你使用插件来处理 CSS 代码。这使得你可以使用各种 CSS 特性，即使这些特性还没有被浏览器支持。
- 使用 tree shaking
tree shaking 是一种代码优化技术，它可以删除未使用的代码。这使得你的代码包更小，加载速度更快。
- 使用代码分割
代码分割是一种打包技术，它可以将你的代码包分成多个更小的包。这使得你的代码包加载速度更快，并降低了内存消耗。
- 使用热模块替换
热模块替换是一种开发工具，它允许你在不重新加载页面的情况下更新你的代码。这使得你可以快速地迭代你的代码，并提高开发效率。
四、总结
在本文中，我们讨论了如何使用 webpack4 和 babel7 来处理样式。我们介绍了如何安装必要的包，如何配置 webpack.config.js 文件，以及如何使用不同的样式预处理器，如 CSS、Sass、Less 和 Stylus。最后，我们讨论了一些提高样式处理性能的技巧。
