如何设置 webpack 以缩小和组合 scss 和 javascript 之类的 CodeKit？

Question

我在使用 webpack 而不是 Codekit v1.9.3 时遇到问题。我开始从 CodeKit 迁移到 Grunt 和 Gulp，然后了解了 webpack，这听起来很酷。我似乎无法让它正常工作。

“喜欢 Codekit”意味着我可以：

• 使用coffeescript 语法编写javascript
• 将所有脚本源文件和库压缩/丑化并合并到一个文件中
• 根据需要选择性地包含 bootstrap-sass (scss) 框架的组件
• 通过 sass 变量维护一个带有引导自定义的小文件，例如 $brand-primary
• 使用webpack --watch 在脚本和样式发生更改时自动编译它们
• 最终得到一个 css 文件和一个脚本文件，可以包含在样式表和脚本标记中。

---

Codekit 项目设置

Bower 资源：

我目前在项目之外全局存储这些：

~/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 最令人困惑的部分是：

1. 应该在哪里添加 require("bootstrap-sass-webpack") 之类的内容 - 是在 webpack.config.js 文件中，还是在 js/main.js 文件中？
2. 这样的模块是否应该在使用 npm install 安装后立即提供给 webpack？
3. 我认为我应该这样做 npm install webpack -g 以便全局安装 webpack，并为其他模块使用 npm install 而不使用 -g。但是，我没有看到在我的项目中创建任何 node_modules 文件夹。不应该有吗？
4. 如何为require("bootstrap-sass-webpack") 等内容确定/指定搜索路径？

我应该安装哪些节点模块才能做到这一点？我的webpack.config.js 应该是什么样子？

Answer 1

简介

Webpack 主要是一个 JavaScript 捆绑器。它的“原生”语言是 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/"
}

由于引导程序通过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" },
    ]
}
...

配置入口

要将引导程序包含到您的包中，有几种方法。一种是通过您已经尝试过的多条目选项。我建议在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";

请注意，webpack 不会触及 scss 文件中的 import 语句，因为 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 控制。您可以使用package.json 的scripts 部分：

{
    ...
    "scripts": {
        "start": "webpack --config path/to/webpack.config.js & node server.js"
    }
}

那么你只需要运行npm start