使用 Webpack 编译 Scss答案

【问题标题】：Compile Scss with Webpack使用 Webpack 编译 Scss
【发布时间】：2016-12-26 06:00:24
【问题描述】：

我仍在尝试围绕 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...

【问题讨论】：

标签： node.js sass webpack bundle frontend

【解决方案1】：

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

加载器

webpack 只能原生处理 JavaScript，但加载器用于将其他资源转换为 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 包装，但仍将被正确地视为 CSS。

您为什么要这样做？

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

【讨论】：

哇！我认为这终于让我掌握了 Webpack！这实际上是相当惊人的......不过，作为一个旁注。如果 Webpack 只将所有内容捆绑到一个 js 文件中。如何使用 Webpack 将 index.html 从 'src' 目录移动到 'bin' 目录？
你不会用 webpack 做那个。您需要一些包含捆绑的 JS 文件的 html 文件。如果你想拥有一个简约的index.html，可以使用对应的html-loader