先看 webpack.config.dev.js 里的相关代码：
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
],
},
},
];
if (preProcessor) {
loaders.push(require.resolve(preProcessor));
}
return loaders;
};
module.exports = {
mode: 'development',
// ...
module: {
// ...
{
oneOf: [
// ...
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
}),
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// Chains the sass-loader with the css-loader and the style-loader
// to immediately apply all styles to the DOM.
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader'),
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
}
// ...
};
4 个 样式文件后缀的正则表示，这份配置里是将普通 (s)css 文件和 (s)css module 文件是按文件名后缀不同而区分对待的，前者视为普通 css 文件，而处理后者时开启 css-loader 的 module 模式。这样做的一个好处是区分明确，全局的 class 样式加写到 .(s)css 文件里，需要加 hash 的局部样式就写到 .module.(s)css 文件里，这样也可以不用在想要写一个全局样式时把 class 包到 :global() 里了。
getStyleLoaders 是一个返回 loader 配置的函数，内部默认有 ['style-loader', 'css-loader', 'postcss-loader'] 三个 loader。函数接受两个参数，其中第一个是 css-loader 的 option 配置。第二个是视需要添加 sass-loader 或者 less-loader。需要添加 postcss 插件，可以在 getStyleLoaders 里对应的 plugin 配置里加。以上就是 development 下关于样式的配置，下面看看 production 里不一样的地方：
// style-loader 换成了下面的内容
{
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
),
},
此外配置里还多了 mini-css-extract-plugin、optimize-css-assets-webpack-plugin、postcss-safe-parser 这三个东西，第一个的作用是将构建后的 css 样式，生成 .css 文件，然后以 link 标签的形式插入到模板 html 中；第二个和第三个的作用是压缩 css 文件。
