如何设置 webpack 以缩小和组合 scss 和 javascript 之类的 CodeKit? [英] How can I setup webpack to minify and combine scss and javascript like CodeKit?

问题描述

我在使用 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.jsjs/main.js <--当前编译的js'输出'文件js/main.coffeecss/styles.css <-- 当前编译后的 css '输出'文件scss/styles.scssscss/modules/_bootstrap-customizations.scssscss/modules/_typography.scssscss/partials/_header.scssscss/partials/_footer.scss

styles.scss 的内容

@import "modules/bootstrap-customizations";# 本地自定义@import "引导程序/变量";@import "bootstrap/mixins";... # 根据需要加载引导文件@import "引导程序/井";

---

系统设置:

• 系统: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 = {入口: ["./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",./js/main.coffee"],输出: {路径:__dirname，文件名:main.js"},模块: {装载机:[{测试:/.css$/，加载器:style！css"}]}};

Webpack 错误

当我运行 webpack 我得到这个:

./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles 中的错误.loader.js!./bootstrap-sass.config.js标准输入:1:找不到或无法读取要导入的文件:~bootstrap-sass/assets/stylesheets/bootstrap/variables

NPM 错误

我在尝试 npm install bootstrap-sass 时遇到错误，并且在寻找解决方案时没有任何运气.我什至不确定我是否需要这个模块.

npm 错误！达尔文 13.4.0npm 错误！argv 节点" /usr/local/bin/npm" 安装" bootstrap-sass"npm 错误！节点 v0.10.32npm 错误！npm v2.1.7npm 错误！代码 EPEERINVALIDnpm 错误！peerinvalid 包 bootstrap-sass 不满足其兄弟姐妹的 peerDependencies 要求！npm 错误！peerinvalid Peer bootstrap-sass-webpack@0.0.3 想要 bootstrap-sass@~3.2.0npm 错误！请在任何支持请求中包含以下文件:npm 错误！/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，并在没有 -g 的情况下使用 npm install对于其他模块.但是，我没有看到在我的项目中创建任何 node_modules 文件夹.不应该有吗?
4. require("bootstrap-sass-webpack") 之类的搜索路径是如何确定/指定的?

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

解决方案

简介

Webpack 主要是一个 JavaScript 捆绑器.它的原生"语言是 JavaScript，所有其他源都需要一个将其转换为 JavaScript 的加载器.例如，如果您 require() 一个 html 文件...

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

...您需要 html-loader.结果……

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

...进入...

module.exports = "<div>
 <img src="" + require("./assets/img.png") + "">
</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...模块: {装载机:[//加载器将从右到左应用{测试:/.scss$/，加载器:style！css！sass"}]}...

您还可以将选项作为查询参数传递给 node-sass:

<代码>{测试:/.scss$/，加载器:style!css!sass?includePaths[]="+path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"}

由于引导程序通过 url() 语句引用图标，css-loader 将尝试将这些资源包含到包中，否则将抛出异常.这就是为什么您还需要 file-loader:

//webpack.config.js...模块: {装载机:[{测试:/.scss$/，加载器:style！css！sass"}，{ 测试:/.jpe?g$|.gif$|.png$|.svg$|.woff$|.ttf$/，加载器:文件"}，]}...

配置入口

要将引导程序包含到您的包中，有几种方法.一种是通过您已经尝试过的多条目选项.我建议在 require() 主 sass 文件的位置使用 单个条目:

//main.js要求(./main.scss")；

鉴于您的 includePaths 已配置，那么您可以这样做:

//main.scss//设置字体路径，使 url() 指向实际文件$icon-font-path: "../../../fonts/bootstrap";@import "引导程序";

请注意，webpack 不会触及 scss-files 中的 import 语句，因为 libsass 没有 api (然而)提供自定义解析器.

为了防止代码重复，拥有一个单个主 sass 文件也很重要，因为 webpack 会单独编译每个 sass 文件.

通过 npm 安装咖啡加载器后，您的最终 webpack.config.js 应该如下所示:

module.exports = {条目:./js/main.coffee"，输出: {路径:__dirname，文件名:main.js"},模块: {装载机:[{测试:/.scss$/，加载器:style！css！sass"}，{ 测试:/.jpe?g$|.gif$|.png$|.svg$|.woff$|.ttf$/，加载器:文件"}，{测试:/.coffee$/，加载器:咖啡"}]}};

<小时>

全局 Webpack?

最好不要全局安装 webpack，因为它是你项目的依赖，因此应该通过 npm 控制.您可以使用 package.json 的 scripts 部分:

<代码>{...脚本":{开始":webpack --config path/to/webpack.config.js & node server.js"}}

然后你只需要运行 npm start

I'm having trouble using webpack instead of Codekit v1.9.3. I started working to move from CodeKit to Grunt and Gulp, and then learned about webpack which sounds very cool. I just can't seem to get it working correctly.

"Like Codekit" means I can:

• Write javascript with the coffeescript syntax
• Have all script source files and libraries minified / uglified and combined into one file
• Selectively include components of the bootstrap-sass (scss) framework as needed
• Maintain a small file with bootstrap customizations via sass variables, like $brand-primary
• Use webpack --watch to compile both scripts and styles automatically when they are changed
• End up with one css file and one script file that can be included with a stylesheet and script tag.

---

Codekit Project Setup

Bower resources:

I'm currently storing these globally, outside of the project:

~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets

Because CodeKit supports compass, I've got this in my config.rb file:

add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"

Project Structure

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

Contents of styles.scss

@import "modules/bootstrap-customizations";  # local customizations
@import "bootstrap/variables";
@import "bootstrap/mixins";
...                                          # load bootstrap files as required
@import "bootstrap/wells";

---

System Setup:

• system: OS X 10.9
• node - v0.10.32
• npm - v2.1.7
• zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)

node was installed with homebrew's brew install node and seems to be working fine otherwise.

---

What I've Tried

I've read over these pages:

• 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

I've attempted to create a webpack.config.js file several times, my latest attempt was several versions of this:

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 Error

When I run webpack I get this:

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 Error

I get an error when attempting to npm install bootstrap-sass, and not had any luck when searching for a solution. I'm not even sure I need this module.

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

---

Sources of Confusion

The most confusing parts of webpack for me are:

1. Where should things like require("bootstrap-sass-webpack") be added - is it in the webpack.config.js file, or in the js/main.js file?
2. Should modules like this available to webpack as soon as they are installed with npm install ?
3. I thought that I should do npm install webpack -g so that webpack was installed globally, and use npm install without the -g for the other modules. However, I don't see any node_modules folder being created in my project. Shouldn't there be one?
4. How are the search paths determined / specified for things like require("bootstrap-sass-webpack") ?

What node modules should I install to be able to do this? And what should my webpack.config.js look like?

解决方案

Introduction

Webpack is mainly a JavaScript-bundler. Its "native" language is JavaScript and every other source requires a loader which transforms it to JavaScript. If you require() an html-file for example...

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

...you'll need the html-loader. It turns...

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

...into...

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

If a loader doesn't return JavaScript, it needs to be "piped" to another loader.

---

How to load SASS-files

Configure loaders

In order to use SASS you'll need at least the sass-loader and the css-loader. The css-loader returns a JavaScript string. If you want to import the returned JavaScript string as StyleSheet, you'll also need the style-loader.

Run npm i sass-loader css-loader style-loader --save

Now you need to apply these loaders on all files that match /.scss$/:

// webpack.config.js
...
module: {
    loaders: [
        // the loaders will be applied from right to left
        { test: /.scss$/, loader: "style!css!sass" }
    ]
}
...

You can also pass options to node-sass as query parameters:

{
    test: /.scss$/, loader: "style!css!sass?includePaths[]=" + 
        path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"
}

Since bootstrap references icons via the url() statement, the css-loader will try to include these assets into the bundle and will throw an exception otherwise. That's why you'll also need the file-loader:

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

Configure entry

To include bootstrap into your bundle there are several ways. One is via the multi-entry option as you've already tried. I recommend to use a single entry where you require() your main sass-file:

// main.js
require("./main.scss");

Given that your includePaths are configured then you can do:

// main.scss
// Set the font path so that url() points to the actual file
$icon-font-path: "../../../fonts/bootstrap";

@import "bootstrap";

Please note that import statements inside scss-files are not touched by webpack because libsass has no api (yet) to provide custom resolvers.

To prevent code duplication it's also important to have a single main sass-file, because webpack compiles every sass-file individually.

With the coffee-loader installed via npm your final webpack.config.js should look like:

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 globally?

It's best not to install webpack globally, because it's a dependency of your project and thus should be controlled via npm. You can use the scripts-section of your package.json:

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

Then you just need to run npm start

这篇关于如何设置 webpack 以缩小和组合 scss 和 javascript 之类的 CodeKit?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！