我仍在尝试把头放在webpack上,而来自Gulp的确令人困惑。我的项目结构如下:
./root
-- src
-- styles.scss
-- bin
-- node_modules
-- webpack.config.js
因此,只是超级简单,我想styles.scss
在src
目录中进行编译并将其输出到bin
目录中。我安装了以下装载机:
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>
尽管如此,您的CSS尽管被称为并用JavaScript进行了封装,但仍将被正确地视为CSS。
基本上是将呼叫保存到服务器。Webpack为您提供了将JS,[S] CSS和许多其他东西捆绑到一个JS文件中的机会,您可以通过对服务器的一次调用就可以获取它,从而节省了很多往返时代。尽管如此,浏览器仍将相应地解释所有资源。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句