我在使用 webpack 而不是 Codekit 时遇到问题v1.9.3。我开始从 CodeKit 转向 Grunt 和 Gulp,然后了解了听起来很酷的 webpack
。我似乎无法让它正常工作。
“Like Codekit”意味着我可以:
- 使用
coffeescript
语法编写javascript
- 将所有脚本源文件和库缩小/丑化并合并为一个文件
- 根据需要有选择地包含
bootstrap-sass
(scss) 框架的组件 - 通过 sass 变量维护一个带有 Bootstrap 自定义的小文件,例如
$brand-primary
- 使用
webpack --watch
在脚本和样式发生更改时自动编译它们 - 最终得到一个 css 文件和一个脚本文件,它们可以包含在样式表和脚本标记中。
Codekit 项目设置
鲍尔资源:
我目前将这些存储在项目之外的全局范围内:
~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets
因为 CodeKit 支持指南针,所以我将其添加到我的 config.rb
文件中:
add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"
项目结构
js/fancybox.js
js/main.js <-- currently the compiled js 'output' file
js/main.coffee
css/styles.css <-- currently the compiled css 'output' file
scss/styles.scss
scss/modules/_bootstrap-customizations.scss
scss/modules/_typography.scss
scss/partials/_header.scss
scss/partials/_footer.scss
styles.scss 的内容
@import "modules/bootstrap-customizations"; # local customizations
@import "bootstrap/variables";
@import "bootstrap/mixins";
... # load bootstrap files as required
@import "bootstrap/wells";
<小时/>
系统设置:
- 系统:OS X 10.9
- 节点 - v0.10.32
- npm - v2.1.7
- zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)
node 是用 homebrew 的 brew install node
安装的,否则似乎工作正常。
我尝试过的
我已阅读这些页面:
- http://webpack.github.io/docs/configuration.html
- https://github.com/petehunt/webpack-howto
- http://webpack.github.io/docs/tutorials/getting-started/
- https://www.npmjs.org/package/bootstrap-sass-webpack
我曾多次尝试创建 webpack.config.js
文件,我最近的尝试是以下几个版本:
module.exports = {
entry: [
"./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",
"./js/main.coffee"
],
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
Webpack 错误
当我运行webpack
时,我得到这个:
ERROR in ./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
stdin:1: file to import not found or unreadable: "~bootstrap-sass/assets/stylesheets/bootstrap/variables
NPM 错误
我在尝试npm install bootstrap-sass
时遇到错误,并且在搜索解决方案时没有任何运气。我什至不确定我是否需要这个模块。
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "bootstrap-sass"
npm ERR! node v0.10.32
npm ERR! npm v2.1.7
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package bootstrap-sass does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer bootstrap-sass-webpack@0.0.3 wants bootstrap-sass@~3.2.0
npm ERR! Please include the following file with any support request:
npm ERR! /Users/cwd/webpack-test/npm-debug.log
<小时/>
困惑的根源
webpack 对我来说最令人困惑的部分是:
- 像
require("bootstrap-sass-webpack")
这样的东西应该添加到哪里 - 是在webpack.config.js
文件中,还是在>js/main.js
文件? - 这样的模块在使用
npm install
安装后是否应该立即可供 webpack 使用? - 我认为我应该执行
npm install webpack -g
以便全局安装 webpack,并使用npm install
而不使用-g
对于其他模块。但是,我没有看到在我的项目中创建任何node_modules
文件夹。难道不应该有一个吗? - 如何确定/指定
require("bootstrap-sass-webpack")
之类的搜索路径?
我应该安装哪些节点模块才能做到这一点?我的 webpack.config.js
应该是什么样子?
最佳答案
简介
Webpack 主要是一个 JavaScript bundler 。它的“原生”语言是 JavaScript,所有其他源都需要一个加载器将其转换为 JavaScript。如果你require()
例如 html 文件...
var template = require("./some-template.html");
...您需要 html-loader 。原来如此……
<div>
<img src="./assets/img.png">
</div>
...进入...
module.exports = "<div>\n <img src=\"" + require("./assets/img.png") + "\">\n</div>";
如果加载器不返回 JavaScript,则需要将其“传送”到另一个加载器。
<小时/>如何加载 SASS 文件
配置加载器
为了使用 SASS,您至少需要 sass-loader和 css-loader 。 css-loader 返回一个 JavaScript 字符串。如果要将返回的 JavaScript 字符串导入为 StyleSheet ,您还需要 style-loader .
运行npm i sass-loader css-loader style-loader --save
现在您需要将这些加载器应用于与 /\.scss$/
匹配的所有文件。 :
// webpack.config.js
...
module: {
loaders: [
// the loaders will be applied from right to left
{ test: /\.scss$/, loader: "style!css!sass" }
]
}
...
您还可以将选项传递给 node-sass作为查询参数:
{
test: /\.scss$/, loader: "style!css!sass?includePaths[]=" +
path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"
}
由于 Bootstrap 通过 url()
引用图标语句中,css-loader 将尝试将这些资源包含到包中,否则将抛出异常。这就是为什么您还需要 file-loader :
// webpack.config.js
...
module: {
loaders: [
{ test: /\.scss$/, loader: "style!css!sass" },
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
]
}
...
配置条目
要将 bootstrap 包含到您的 bundle 中,有多种方法。一种是通过您已经尝试过的多次输入选项。我建议使用单个条目,其中 require()
你的主 sass 文件:
// main.js
require("./main.scss");
鉴于您的 includePaths
配置完成后,您可以执行以下操作:
// main.scss
// Set the font path so that url() points to the actual file
$icon-font-path: "../../../fonts/bootstrap";
@import "bootstrap";
请注意,scss 文件中的 import 语句不会被 webpack 触及,因为 libsass 没有 api ( yet ) 来提供自定义解析器。
为了防止代码重复,拥有一个单个主 sass 文件也很重要,因为 webpack 会单独编译每个 sass 文件。
通过 npm 安装咖啡加载器后,您的最终 webpack.config.js
应该看起来像:
module.exports = {
entry: "./js/main.coffee",
output: {
path: __dirname,
filename: "main.js"
},
module: {
loaders: [
{ test: /\.scss$/, loader: "style!css!sass" },
{ test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
{ test: /\.coffee$/, loader: "coffee" }
]
}
};
<小时/>
Webpack 全局范围内?
最好不要全局安装 webpack,因为它是项目的依赖项,因此应通过 npm 进行控制。您可以使用 scripts -您的package.json
的部分:
{
...
"scripts": {
"start": "webpack --config path/to/webpack.config.js & node server.js"
}
}
然后你只需要运行 npm start
关于coffeescript - 如何设置 webpack 像 CodeKit 一样缩小并组合 scss 和 javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26851120/