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

Question

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

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

- ＆GT;使用webpack，为什么要从JS源代码中导入CSS文件而不像传统那样单独构建CSS？

通过不从Javascript导入CSS，我的意思是CSS的webpacks配置没有＆＃34; .js＆＃34;扩展，它直接解析CSS / SCSS文件。

不从javascript导入CSS有好处：

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

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

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

Answer 1

我是一个传统主义者，而不是大多数，因为我已经这样做了超过15年，但我会说新的分离关注点的方式比传统方式更好。

在旧思维中，我们使用将布局与样式和功能分开（hss来自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进行的这种差异可以忽略不计，开发经验的改进（如上所述）值得任何额外的ms

2. 这一点确实适用于构建css / sass的方式不会因为我们从js文件中需要它而改变。我想你的意思是你要使用css模块，但这是一个选择，你没必要。我使用sass并按正常情况应用类名。

3. 在webpack配置中，如果需要，可以从css配置中拆分js配置。我不认为这会让事情更清楚。配置太小了，不值得担心。

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



这是简单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']
        })
      }
    ]
  }
};