我如何设置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

• 将所有脚本源文件和库缩小/ ugl化并合并到一个文件中


• 选择性地包括 bootstrap-sass （scss）


• 通过sass变量（例如 $ brand-primary
$ b $维护一个小型文件b
• 使用 webpack --watch 在脚本和样式更改时自动编译脚本和样式


• 最后使用一个css文件以及一个可以包含在样式表和脚本标记中的脚本文件。

---

Codekit项目设置

资源：

我目前正在全球范围内存储这些项目， p>

 〜/ bower_components / twbs-bootstrap-sass / vendor / assets / stylesheets 
  pre> 
 
 
因为CodeKit支持罗盘，我已经在我的 config.rb 文件中：
  add_import_path〜/ bower_components / twbs-bootstrap-sass / vendor / assets / stylesheets
  
  项目结构 
 
 
 
  js / fancybox.js 
 js / main.js<  - 目前编译的js'output'文件
 js / main.coffee 
 
 css / styles.css<  - 目前编译的css'output'文件
 
 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 
 @importbootstrap / variables; 
 @importbootstrap / mixins; 
 ...＃根据需要加载bootstrap文件
 @importbootstrap / wells; 
  
 
 
 
 
 
 
系统设置：
 
 
 
 
 
系统：OS X 10.9 
 
 
 node  -  v0.10.32 
 
 < v2.1.7  
 
 zsh  -  zsh 5.0.7（x86_64-apple-darwin13.4.0）
 
 
 
 
 
节点安装了homebrew的 brew安装节点，似乎工作正常。
 
 
 
 
 
 
我尝试了什么
 
 
 
我读过这些网页：
 
 
 
 
 
  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
]，
输出：{
 path：__dirname，
 filename：main.js
}，
模块：{
 loaders：[
 {test：/\.css$/，loader：style！css} 
] 
} 
}; 
  
   Webpack错误  b 
 $ b 
当我运行 webpack 时，我得到：
 code>错误在./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles。 loader.js！./ bootstrap-sass.config.js 
 stdin：1：要导入的文件未找到或不可读：〜bootstrap-sass / assets / stylesheets / bootstrap / variables 
  
 p> 
 
 
   p>我在尝试 npm install bootstrap-sass 时遇到错误，在搜索解决方案时没有任何运气我甚至不确定我需要这个模块。 
  npm ERR！Darwin 13.4.0 
 npm ERR！argvnode/ usr / local / bin / npminstallbootstrap-sass
 npm ERR！node v0.10.32 
 npm ERR！npm v2.1.7 
 npm ERR！code EPEERINVALID 
 
 npm ERR！peerinvalid软件包bootstrap-sass不满足其兄弟的peerDependencies要求！ 
 npm ERR！ peerinvalid Peer bootstrap-sass-webpack@0.0.3 want bootstrap-sass@~3.2.0 
 
 npm ERR！请包含任何支持请求的以下文件：
 npm ERR！ /Users/cwd/webpack-test/npm-debug.log 
  
 
 
 
 
 
 
混乱来源
 
 
 
对于我来说，最困惑的部分是：
 
 
添加 require（bootstrap-sass-webpack）应该在 webpack.config.js 文件或 js / main.js 文件中？
 
 
一旦他们安装 npm install ？
 
 
我认为我应该做 npm install webpack  - g ，以便在全局安装webpack，并使用 npm install 而不使用 -g 其他模块。但是，我没有看到在我的项目中创建任何 node_modules 文件夹。 
     c>？
 
 
我应该安装哪些节点模块才能执行此操作？  
 
解决方案
 
 简介
 
 
 
 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> \\\
< img src = \+ require（./ assets / img.png）+\> ; \\\
< / div>; 
  
如果加载器不返回JavaScript，它需要管道到另一个加载器。 / p> 
 
 
 
 
 
如何加载SASS文件
 
 
 
 h3> 
 
 
要使用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 
 ... 
模块：{
装载器：[
 //装载器将从右到左应用
 {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将尝试将这些资源包含在bundle中，并抛出异常除此以外。这就是为什么您还需要文件加载器：
  // webpack.config.js 
 ... 
模块：{
 loaders：[
 {test：/ \ .scss $ /，loader：style！css！sass}，
 {test：/\.jpe？g $ | \.gif $ | \.png $ | \.svg $ | \.woff $ | \.ttf $ /，loader：file}，
] 
} 
 ... 
  pre> 
 
 
配置条目
 
 
 
要将引导程序包括到捆绑包中，有几种方法。一个是通过您已经尝试过的多输入选项。我建议您使用单个条目，其中 require（）您的主要sass文件：
  // main.js 
 require（./ main.scss）; 
  
由于配置了 includePaths 可以做：
  // main.scss 
 //设置字体路径，让url（）指向实际文件
 $ icon-font-path：../../../fonts/bootstrap; 
 
 @importbootstrap; 
 
请注意，webpack不接触scss文件中的import语句，因为libsass没有api a href =https://github.com/sass/libsass/issues/21>尚未）提供自定义解析器。
 
 
 
防止代码因为webpack单独编译每个sass文件，所以重要的是有一个单个主sass文件。
 
 
 
通过npm，您的最终 webpack.config.js 应如下所示：
  module.exports = {
 entry：./js/main.coffee，
 output：{
 path：__dirname，
 filename：main.js
}，
模块：{
 loaders：[
 {test：/\.scss$/，loader：style！css！sass}，
 {test： /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/，loader：file}，
 {test：/\.coffee$/，loader：coffee} 
] 
} 
}; Webpack全球？
 
  
 
 
 
 
 
 
 b 
 
最好不在全球安装webpack，因为它是项目的依赖项，因此应该通过npm来控制。您可以使用 package.json 的脚本部分， code>：
  {
 ... 
scripts：{
start：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:

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?
Should modules like this available to webpack as soon as they are installed with npm install ?
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?
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>\n    <img src=\"" + require("./assets/img.png") + "\">\n</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屋！