Webpack get started

Get Start

文档地址
webpack是用来构建app中的js module的。webpack可以简化构建依赖应用的的依赖关系图并让依赖内容按照规定的顺序进行构建。weboack可以自定义化代码，可以在对外发布的时候分拆vendor/css/js代码，在测试时使用hot-reload机制。

Creating a bundle

创建webpack的项目

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

一般js项目的传统写法如下

//app/index.js
function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());
//index.html

  
    
    
  
  
    
  

需要在html中指定要加载的index.js，但是由于index.js中使用了lodash库，
所以需要先指定加载该库，才能在index.js中使用_符号。
传统的写法可能会导致，加载很多不需要使用的库，而这些不使用的库，
会影响网页的加载速度。

使用webpack则不会有该问题。
下面是使用webpack实现同样操作的代码示例
首先需要安装lodash，
npm install --save lodash

//app/index.js
import _ from 'lodash'
function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());
//index.html

  
    
  
  
  
    
  

代码编写完成后在命令行中执行
./node_modules/.bin/webpack app/index.js dist/bundle.js
表示从app/index.js入口文件开始，生成需要使用的dis/bundle.js文件。
此时访问网页，实现的效果是一样的。
使用webpack打包，在打包的过程中，webpack只会将使用到的js代码进行打包。
未用到的会被移除。

ES2015

注意上面的代码，使用了ES2015中的import/export语法。
webpack只处理import/export，除了这个之外想要使用其他的ES2015的语法，
仍然需要使用babel

webpack配置文件

真实项目中不可能使用命令行传参的方式进行配置。
一般会使用配置文件的形式。
配置文件名为webpack.config.js.
之前给项目传递的配置参数对应于下面的配置文件。

var path = require('path');

module.exports = {
  entry: './app/index.js',//打包的入口文件
  output: {
    filename: 'bundle.js',//打包生成的文件名
    path: path.resolve(__dirname, 'dist')//打包文件存放的路径
  }
};

按照上面配置执行webpack命令如下所示

./node_modules/.bin/webpack --config webpack.config.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./app/index.js 278 bytes {0} [built]

如果存在webpack.config.js文件，webpack命令会默认使用该配置文件