如何设置webpack来缩小和组合scss和javascript,如CodeKit？

Question

我在使用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";

---

系统设置:

• system: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部分是:

1. 应该在哪里require("bootstrap-sass-webpack")添加 - 是在webpack.config.js文件中还是在js/main.js文件中？
2. 这些模块一旦安装就可以在webpack中使用npm install吗？
3. 我认为我应该这样做,npm install webpack -g以便全局安装webpack,并且npm install不使用-g其他模块.但是,我没有node_modules在我的项目中看到任何文件夹.不应该有吗？
4. 如何确定/指定搜索路径require("bootstrap-sass-webpack")？

我应该安装哪些节点模块才能执行此操作？我应该webpack.config.js怎么样？

Answer 1

介绍

Webpack主要是一个JavaScript-bundler.它的"本机"语言是JavaScript,其他所有源都需要一个将其转换为JavaScript的加载器.如果你require()是一个html文件,例如......

var template = require("./some-template.html");

......你需要html-loader.事实证明...

<div>
    <img src="./assets/img.png">
</div>

... INTO ...

module.exports = "<div>\n    <img src=\"" + require("./assets/img.png") + "\">\n</div>";

如果加载器没有返回JavaScript,则需要将其"管道"到另一个加载器.

如何加载SASS文件

配置加载器

为了使用SASS,你至少需要sass-loader和css-loader.css-loader返回一个JavaScript字符串.如果要将返回的JavaScript字符串作为StyleSheet导入,则还需要样式加载器.

跑 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将尝试将这些资产包含在bundle中,否则将抛出异常.这就是为什么你还需要文件加载器:

// webpack.config.js
...
module: {
    loaders: [
        { test: /\.scss$/, loader: "style!css!sass" },
        { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
    ]
}
...

配置条目

要将bootstrap包含到您的包中,有几种方法.一个是通过多次进入选项,因为你已经尝试过.我建议您在主sass文件中使用单个条目require():

// 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(尚未)提供自定义解析器.

为了防止代码重复它也是重要的是有一个单一的主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": {
        "start": "webpack --config path/to/webpack.config.js & node server.js"
    }
}

然后你只需要运行 npm start