我仍在努力研究 webpack，而来自 Gulp 的它非常令人困惑。我的项目结构如下:
./root
-- src
-- styles.scss
-- bin
-- node_modules
-- webpack.config.js
所以只是一些 super 简单的事情，我想编译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 ......
最佳答案
到目前为止，我不是 webpack 专家，但根据我的理解，这正是 webpack 应该做的，根据它自己的文档:
Loaders
webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript. [...]
这意味着，即使您只包含 SCSS 文件，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 让您有机会 bundle 您的 JS、[S]CSS 和 many other things到一个单一的 JS 文件中，你将能够通过对服务器的一次调用来获取它，因此节省了大量的往返时间。 尽管如此，浏览器仍会相应地解释所有资源。
关于node.js - 使用 Webpack 编译 Scss，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39032866/