Webpack学习指南

本地OS：OSX 10.11.6
Node：[nodejs.org](https://nodejs.org)
Webpack：[webpack.github.io](https://webpack.github.io/)

Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

Webpack

1、安装Node

brew install node    

---

2、安装Webpack

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

#本地项目安装
npm install webpack --save-dev

---

3、Webpack使用

1、初始化项目

# 进入项目目录
# 确定已经有package.json，没有就通过 npm init 创建

2、创建webpack.config.js配置文件

# webpack.config.js

module.exports = {
    entry: "./entry.js",  //入口文件配置项
    output: {
        filename: "bundle.js" //打包文件
    },
    module: {
        loaders: []
    }
};

• entry：指入口文件的配置项，它是一个数组的原因是-webpack允许多个入口点。 当然如果你只有一个入口的话，也可以直接使用双引号"./entry.js"

• output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称

• module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

3、安装依赖包

npm install css-loader style-loader --save-dev

4、测试案例

• 1、安装依赖包

  npm install jquery css-loader style-loader --save-dev
  

• 2、配置webpack.config.js文件

# webpack.config.js

module.exports = {
    entry: "./entry.js",  //入口文件配置项
    output: {
        filename: "bundle.js" //打包文件
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            }
        ]
    }
};

• 3、index.html

• 4、module-one.js

console.log("Module One");

var $ = require("jquery");

$("h1").html("Hello Webpack!");

• 5、module-two.js

console.log("Module Two");

• 6、style.css

body{
    background: orange;
}

• 7、entry.js

require('./style.css');
require('./module-one.js');
require('./module-two.js');

• 8、执行打包

  webpack

# 会出现如下信息
Hash: e419ccdda7209b3a641f
Version: webpack 1.14.0
Time: 1043ms
    Asset    Size  Chunks             Chunk Names
bundle.js  288 kB       0  [emitted]  main
   [0] ./entry.js 123 bytes {0} [built]
   [5] ./module-one.js 130 bytes {0} [built]
   [7] ./module-two.js 69 bytes {0} [built]
    + 5 hidden modules

---

4、常用依赖包

css-loader style-loader babel-core babel-loader sass-loader url-loader file-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime

---

5、常用命令

//打包详细信息
webpack --display-modules

//打印更详细信息
webpack --display-modules --display-reasons

//发布压缩
webpack -p

//热更新代码
webpack -w

//安装webpack调试服务
npm install  webpack-dev-server --save-dev

npm install webpack-dev-server -g  //全局安装

//开启服务器
webpack-dev-server  --inline

//开启热更新
webpack-dev-server  --inline --hot

//生成profile分析文件
webpack --profile  --json > stats.json

//profile文件分析网站
http://webpack.github.io/analyse/

http://chrisbateman.github.io/webpack-visualizer/