css - 使用 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，如果打包器不需要解析 Javascript 源代码，速度会更快。此外，可以使用 parallel-webpack 并行运行 CSS 和 Javscript 的打包器。

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

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

Answer 1

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

在过去的想法中，我们习惯于将布局与样式与功能分开(html 与 css 与 js)。这更“垂直”并且使知道文件在哪里很容易，但很难找到与“功能”相关的特定代码。 IE。一个按钮可能由 /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' 到 从 'fancy-button' 导入按钮。所有旧代码将自动删除。无需尝试在多个地方消化和更改代码。

为了解决您的问题:

1. 是的，node-sass 很快，但我想说这和通过 webpack 之间的区别可以忽略不计，开发体验的改善(如上所述)值得任何额外的 ms

   <

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']
        })
      }
    ]
  }
};