Question

我仍然试图围绕webpack，并且来自Gulp，这让人非常困惑。我的项目结构如下：

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

所以只是一些非常简单的东西，我想编译styles.scss目录中的src并将其输出到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应该做的，根据它自己的文档：

<强>装载机

webpack只能本机处理JavaScript，但加载器习惯了   将其他资源转换为JavaScript。 [...]

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

例如，如果您将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-File中的机会，您可以通过一次调用来获取服务器，从而节省大量的回报 - 行程倍。不过，浏览器会相应地解释所有资源。

用Webpack编译Scss

1 个答案:

你为什么要这样做？