webpack

1.webpack的全局安装

$ npm install webpack -g

---

2.webpack的使用

eg.编译 entry.js 并打包到 bundle.js

$ webpack entry.js bundle.js

---

3.Loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换.

Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。

Loader 可以同步或异步执行。

Loader 运行在 node.js 环境中，所以可以做任何可能的事情。

Loader 可以接受参数，以此来传递配置项给 loader。

Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。

Loader 可以通过npm发布和安装。

除了通过package.json的main指定，通常的模块也可以导出一个 loader 来使用。

Loader 可以访问配置。

插件可以让 loader 拥有更多特性。

Loader 可以分发出附加的任意文件。

在引用 loader 的时候可以使用全名json-loader，或者使用短名json。这个命名规则和搜索优先级顺序在 webpack 的resolveLoader.moduleTemplatesapi 中定义。

Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

安装loader

npm install css-loader style-loader

如果每次requireCSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

将 entry.js 中的require("!style!css!./style.css")修改为require("./style.css")，然后执行：

$ webpack entry.js bundle.js --module-bind'css=style!css'

# 有些环境下可能需要使用双引号

$ webpack entry.js bundle.js --module-bind"css=style!css"

---

4.webpack配置文件

webpack.config.js文件

plugins 插件

引入module可在npm install的时候加上 --save 就会将记录添加到package.json中

---

5.开发环境

webpack --progress（显示编译进度百分比） --colors（颜色） --watch（检测模块未更新不重新编译）

使用webpack-dev-server开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开http://localhost:8080/或http://localhost:8080/webpack-dev-server/可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

#$ npm install webpack-dev-server -g

# 运行

$ webpack-dev-server --progress --colors

---

6.故障处理

命令中添加--display-error-details会打印一些简单的错误信息

Webpack 中涉及路径配置最好使用绝对路径，建议通过

path.resolve(__dirname, "app/folder")或path.join(__dirname, "app", "folder")

的方式来配置，以兼容 Windows 环境。