使用 webpack，为什么要从 JS 源代码中导入 CSS 文件，而不是像传统那样孤立地构建 CSS？

Question

用于加载 css 的 webpack 文档：https ://webpack.js.org/guides/asset-management/#loading-css1

webpack 文档要求从 Javascript 代码导入 CSS 文件，然后运行 ​​extract-text-webpack-plugin 来提取 CSS。

--> 使用 webpack，为什么要从 JS 源代码中导入 CSS 文件，而不是像传统那样孤立地构建 CSS？

不从 Javascript 导入 CSS，我的意思是 CSS 的 webpack 配置没有“.js”扩展名，它直接解析 CSS/SCSS 文件。

不从 javascript 导入 CSS 有以下好处：

1. （客观事实）。如果只想构建 CSS，如果 bundler 不需要解析 Javascript 源代码会更快。此外，可以使用 parallel-webpack 并行运行 CSS 和 Javscript 的打包器。

2. （主观，基于传统，但在我看来最重要）。多年来，SASS 独立构建一直是传统。因此，我们可以实现更好的 HTML 语义和可维护性。从 JS 导入 CSS 是虚拟的，可能会导致忽略生成的单独 CSS 包。

3. （客观事实）为了更清晰，可以为 CSS 和 Javascript 拆分更多配置文件。

Answer 1

我比大多数人更传统，因为我这样做已经超过 15 年了，但我想说分离关注点的新方法比传统方法更好。

在旧的思维中，我们习惯将布局、样式和功能分开（html、css、js）。这更加“垂直”，并且可以轻松了解文件的位置，但很难找到与“功能”相关的特定代码。/src/shop-front.html即，一个按钮可能由 中的一个小按钮部分、几行代码组成/src/css/shop-front.css，然后增强的功能将位于 中的某处/src/js/shop-front.js

新的思维方式是通过组件来分离关注点。所以现在你将拥有你的店面，但这将由它制成/src/components/button/，并且所有文件都将位于同一个地方。包括前面提到的包含 css 的 js 文件。

好处是，如果您决定交换，button您fancy-button所做的就是将店面更改import button from 'button'为import button from 'fancy-button'. 所有旧代码将被自动删除。无需尝试在多个地方消化和更改代码。

为了解决您的疑虑：

1. 确实，node-sass 很快，但我想说它与通过 webpack 之间的区别可以忽略不计，并且开发体验的改进（如上所述）值得任何额外的毫秒

2. 这一点确实适用，因为 css/sass 的构建方式不会仅仅因为我们从 js 文件中需要它而改变。我猜你的意思是如果你要使用CSS模块，但这是一个选择，你不必这样做。我像平常一样使用 sass 并应用类名。

3. 在 webpack 配置中，如果您愿意，您可以将 js 配置与 css 配置分开。不过，我不认为这会让事情变得更清楚。配置很小，不值得担心。

我的文件夹结构很好并且很容易理解：

这是简单 scss 导入的基本配置

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { SRC, DIST } = require('./src/config/paths');

module.exports = {
  devtool: 'source-map',
  cache: true,
  context: SRC,
  entry: {
    app: [`${SRC}/client-entry.js`]
  },
  output: {
    path: DIST,
    filename: '[name]-[chunkhash].js',
    publicPath: '/'
  },
  plugins: [
    new ExtractTextPlugin('[name]-[contenthash].css'),
  ],
  resolve: {
    modules: ['node_modules', SRC],
    extensions: ['.js', '.jsx', '.scss']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [/src/],
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      },
      {
        test: /\.s?css$/,
        include: [/src/],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      }
    ]
  }
};