我在使用 webpack 而不是Codekit v1.9.3时遇到问题。我开始从 CodeKit 迁移到 Grunt 和 Gulp,然后了解了webpack
哪些听起来很酷。我似乎无法让它正常工作。
“喜欢 Codekit”意味着我可以:
javascript
用coffeescript
语法写- 将所有脚本源文件和库缩小/丑化并合并到一个文件中
- 根据需要选择性地包含
bootstrap-sass
(scss)框架的组件 - 通过 sass 变量维护一个带有引导程序自定义的小文件,例如
$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)
节点安装了自制软件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
文件中? - 像这样的模块应该在安装后立即用于 webpack
npm install
吗? - 我认为我应该这样做
npm install webpack -g
,以便全局安装 webpack,并在npm install
没有-g
其他模块的情况下使用。但是,我没有看到node_modules
在我的项目中创建任何文件夹。不应该有一个吗? - 搜索路径是如何确定/指定的
require("bootstrap-sass-webpack")
?
我应该安装哪些节点模块才能做到这一点?我应该是什么webpack.config.js
样子?