用Webpack编译Scss
我仍然想把自己的头包裹在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当然…
我到目前为止还没有webpack专家，但就我的理解，这正是webpack应该做的，根据它自己的文档：
装载机
webpack只能本地处理JavaScript，但是使用加载器将其他资源转换为JavaScript。 […]
这意味着什么，即使你只包含SCSS文件，webpack也会将它们转换成一个JavaScript文件，然后像其他任何JS文件一样包含它。
例如，如果您将styles.css更改为styles.js ，则可以在html的头部调用它
<head> ... <script type="application/javascript" src="styles.js" charset="utf-8"></script> ... </head>
尽pipe如此，您的CSS虽然被称为JavaScript包装，但仍将被正确对待为CSS。
你为什么想做这个？
基本上保存对服务器的调用。 Webpack为您提供了一个机会，将您的JS，您的[CSS]和其他许多东西绑定到一个JS文件中，您可以通过一次调用就可以获取服务器，因此可以节省大量的往返时间，倍。 不过，浏览器会相应地解释所有的资源。