webpack教程：如何从头开始设置 webpack 5( 三 ) 本文已经过原作者TaniaRascia授权

当网站只有一个 CSS 文件，仅能够加载一个CSS文件就足够了。但如果想使用PostCSS ，为了能在任何浏览器中使用所有最新的CSS特性。或者想使用Sass, CSS预处理器，那就需要使用其它的 loader 处理。
我想使用这三种方法——在Sass中编写，在PostCSS中处理，以及编译到CSS 。这需要引入一些加载器和依赖项。

sass-loader — 加载 SCSS 并编译为CSS
node-sass — Node Sass
postcss-loader — 使用 PostCSS 处理 CSS
css-loader — 解析 css import
style-loader —— 将CSS注入到DOM中

npm i -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass就像Babel一样， PostCSS 也需要一个配置文件 postcss.config.js ，在根目录中创建它，并输入以下内容：
postcss.config.js
module.exports = {plugins: {'postcss-preset-env': {browsers: 'last 2 versions',},},}为了测试 Sass 和 PostCSS 是否正常工作，创建src/styles/main.scss ，并输入以下内容：
src/styles/main.scss
$font-size: 1rem;$font-color: lch(53 105 40);html {font-size: $font-size;color: $font-color;}现在，将文件导入index.js并添加四个 loader。它们从最后编译到第一个，因此列表中最后一个是sass-loader ，因为需要编译，然后是PostCSS ，然后是CSS ，最后是style-loader ，它将CSS注入到DOM 中。
src/index.js
import './styles/main.scss'/* ... */webpack.config.js

module.exports = {/* ... */module: {rules: [// CSS, PostCSS, and Sass{test: /\.(scss|css)$/,use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],},],},}

现在，重新构建时，项目中已经应用了Sass和PostCSS 。
开发每次进行更新时都要运行npm run build ，站点越大，构建所需的时间就越长，这样就十分的烦琐。为此可以为 webpack 设置两种配置：

生产配置，用于最小化，优化和删除所有源映射
开发配置，该配置在服务器中运行webpack ，每次更改都会更新，并具有源映射

开发模式下是在内存中运行所有内容，而不是构建一个dist文件，需要安装 webpack-dev-server
npm i -D webpack-dev-server出于演示目的，我们可以仅将开发配置添加到正在构建的当前webpack.config.js文件中并对其进行测试。但是，我们开发一般要创建两个配置文件：一个生产环境用的 mode: production ，一个开发环境用的mode: development 。

const webpack = require('webpack')module.exports ={/* ... */mode: 'development',devServer: {historyApiFallback: true,contentBase: path.resolve(__dirname, './dist'),open: true,compress: true,hot: true,port: 8080,},plugins: [/* ... */// Only update what has changed on hot reloadnew webpack.HotModuleReplacementPlugin(),],})

我们添加mode: development ，并创建devServer属性，其中，默认端口将为8080 ，自动打开浏览器窗口，并使用hot-module-placement ，这需要webpack.HotModuleReplacementPlugin插件。这样模块执行更新而无需完全重新加载页面-因此，如果你更新某些样式，则这些样式将发生变化，并且不用重新加载整个 JS，大大加快了开发速度。
现在，可以使用webpack serve命令来启动项目。
package.json
"scripts": {"start": "webpack serve"}npm start运行此命令时，将在浏览器中自动弹出一个指向localhost：8080的链接。现在，您可以更新Sass和JavaScript ，并观看其动态更新。
总结【webpack教程：如何从头开始设置 webpack 5】我用 Babel ， Sass ， PostCSS ，生产优化和开发服务器创建了可用于生产的webpack 5样板，其中包含本文的所有内容，但会涉及更多细节。从这里，可以轻松设置React ， Vue ， Typescript或其他任何您想要的东西。
项目地址：webpack 5 boilerplate
看看它，摆弄它，享受它！
作者：Tania Rascia 译者：前端小智来源：taniarascia
原文：