webpack（一）

一、用 npm 安装 Webpack：

$ npm install webpack -g

二、安装 webpack 依赖：

$ npm install webpack --save-dev

三、创建一个静态页面 index.html 和一个 JS 入口文件 entry.js

然后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

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

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。

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

比如，我们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中
安装 loader：

npm install css-loader style-loader

如果每次 require CSS 文件的时候都要写 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"

五、配置文件

$ npm init//用来初始化生成一个新的 package.json 文件$ npm install

然后创建一个配置文件 webpack.config.js：

var webpack = require('webpack')module.exports = {  entry: './entry.js',  output: {    path: __dirname,    filename: 'bundle.js'  },  module: {    loaders: [      {test: /\.css$/, loader: 'style!css'}    ]  }}

同时简化 entry.js 中的 style.css 加载方式：

require('./style.css')

最后运行

$ webpack

可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js –module-bind ‘css=style!css’ 执行的结果是一样的。

六、插件：
插件可以完成更多 loader 不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。

接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

修改 webpack.config.js，添加 plugins：

var webpack = require('webpack')module.exports = {  entry: './entry.js',  output: {    path: __dirname,    filename: 'bundle.js'  },  module: {    loaders: [      {test: /\.css$/, loader: 'style!css'}    ]  },  plugins: [    new webpack.BannerPlugin('This file is created by joyce')  ]}

然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：

/*! This file is created by joyce *//******/ (function(modules) { // webpackBootstrap/******/    // The module cache/******/    var installedModules = {};/******/    ......

七、开发环境：
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

$ webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

$ 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

八、故障处理：
Webpack 的配置比较复杂，很容出现错误，下面是一些通常的故障处理手段。

一般情况下，webpack 如果出问题，会打印一些简单的错误信息，比如模块没有找到。我们还可以通过参数 –display-error-details 来打印错误详情。

$ webpack --display-error-details

Webpack 的配置提供了 resolve 和 resolveLoader 参数来设置模块解析的处理细节，resolve 用来配置应用层的模块（要被打包的模块）解析，resolveLoader 用来配置 loader 模块的解析。

当引入通过 npm 安装的 node.js 模块时，可能出现找不到依赖的错误。Node.js 模块的依赖解析算法很简单，是通过查看模块的每一层父目录中的 node_modules 文件夹来查询依赖的。当出现 Node.js 模块依赖查找失败的时候，可以尝试设置 resolve.fallback 和 resolveLoader.fallback 来解决问题。

module.exports = {  resolve: { fallback: path.join(__dirname, "node_modules") },  resolveLoader: { fallback: path.join(__dirname, "node_modules") }};

Webpack 中涉及路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, “app/folder”) 或 path.join(__dirname, “app”, “folder”) 的方式来配置，以兼容 Windows 环境。