webpack入门

一、安装

1、安装nodeJS

2、用npm安装webpack

npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。

# 查看 webpack 版本信息
$ npm info webpack

# 安装指定版本的 webpack
$ npm install webpack@1.12.x -g

3、安装webpack-dev-server

npm install webpack-dev-server -g

二、使用

1、进入项目目录，运行npm init生成package.json文件

2、通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。运行完后会生成node_modules文件夹

npm install webpack --save-dev
npm install webpack-dev-server --save-dev

3、如果不使用配置文件webpack.config.js则执行第4步，否则执行第5步

4、运行下面的命令将a.js文件打包生成b.js文件

webpack a.js b.js

在a.js文件中如果需要引入某个模块文件中的内容，则使用require引入

// a.js
document.write(require('./module.js'));

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

5、在package.json中加入我们需要的依赖项，然后运行

npm intall // 安装package.json中所需要的依赖

新建配置文件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'}
    ]
  }
} 

最后运行webpack命令，就可以编译。

如果需要添加插件，插件可以完成更多 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 zhaoda')
  ]
}

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

6、进入项目目录，启动服务器

webpack-dev-server

在浏览器中打开localhost:8080

三、webpack其他指令

当项目逐渐变大，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 服务实时监听它们的变化并自动刷新页面。

 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 环境。

四、参考链接

教程：

webpack中文指南：http://webpackdoc.com/

实例：

阮一峰：https://github.com/ruanyf/webpack-demos