使用 Webpack 编译 Scss

Question

我仍在努力研究 webpack，但来自 Gulp 时，它非常令人困惑。我的项目结构如下：

./root
  -- src
    -- styles.scss
  -- bin
  -- node_modules
  -- webpack.config.js

所以就是超简单的东西，我想把src目录下的styles.scss编译出来，输出到bin目录下。我安装了以下加载器：

样式加载器
css-装载机
sass-loader（也作为依赖安装 node_sass）

现在我知道我没有掌握 Webpack 的一些非常基础的东西，但这是我的 webpack.config.js:

module.exports = {
    entry: './src/styles.scss',
    output: {
        path: './bin',
        filename: 'styles.css'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }
};

当我运行 webpack 在我的目录的根目录中时，它 看起来 可以正常工作。但是 styles.css 文件看起来包含一堆 JavaScript 代码。所以我不明白，需要澄清一下。我隐约猜测，如果你的项目中没有任何 JavaScript 文件，你就不能使用 webpack（当然除了 webpack.config.js...

Answer 1

到目前为止，我还不是 webpack 专家，但根据我的理解，这正是 webpack 应该做的，根据它自己的文档：

Loaders

webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript. [...]

这意味着，即使您只包含 SCSS-Files，webpack 也会将它们转换为 JavaScript-File，然后可以像任何其他 JS-File 一样包含它.

例如，如果您将 styles.css 更改为 styles.js，您将在 html 的头部调用它

<head>
  ...
  <script type="application/javascript" src="styles.js" charset="utf-8"></script>
  ...
</head>

尽管如此，您的 CSS 尽管被称为 JavaScript 并包含在 JavaScript 中，但仍将被正确地视为 CSS。

你为什么要这样做？

基本上是为了节省对服务器的调用。 Webpack 为您提供了将 JS、[S]CSS 和 many other things 捆绑到单个 JS 文件中的机会，您可以通过一次调用服务器来获取该文件，从而节省很多往返时间。尽管如此，浏览器仍会相应地解释所有资源。

使用 Webpack 编译 Scss

Compile Scss with Webpack

frontend

bundle

sass

node.js

webpack

你为什么要这样做？