什么是webpack

Webpack 试图通过用 JavaScript 传递依赖来使构建过程变得更加容易。但是它设计的精妙之处并不在于简单的代码管理部分，而在于它的管理层面是百分百有效的 JavaScript（还有 Node 特性）。Webpack 使你有机会写出一些对整体系统有更好感知的 JavaScript 代码。

环境部署

安装webpack(安装在本地)   版本：2.4.1

npm install --save-dev webpack

webpack支持的node环境

NVM安装

为了兼容老版本JDF，可能会使用不同版本的Node,推荐使用NVM来控制node版本

NVM在window下安装方法：http://blog.csdn.net/tyro_java/article/details/51232458

Window版本下载路径 :https://github.com/coreybutler/nvm-windows/releases

如何运行webpack

执行代码:node_modules/.bin/webpack

使用npm init（创建node配置文件）

精简命令行："start": "node_modules/.bin/webpack",

创建Webpack配置文件：webpack.config.js

webpack1.0与2.0区别

http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/

改动为小部分改动,学1不影响使用2

创建项目目录

dist-经过webpack打包输出的路径

node_modules-安装的各种npm插件，加载器目录（自动的）

src-开发过程中路径

(src内部结构与jdf一直

html，js，css结构)

package.json-npm配置文件

webpack.config.js-webpack配置文件

编写webpack配置文件

配置内容：

var webpack = require('webpack');

module.exports = { 
	entry: './src/js/index.js',
	output: {
		path: __dirname,
		filename: './dist/js/bundle.js'
	}
}

打包css,html,使用loader

配置文件多种写法

1.常用配置方式：

var webpack = require('webpack');

module.exports = { 
	entry: './src/js/index.js',
	output: {
		path: __dirname,
		filename: './dist/js/bundle.js'
	}
}

打包css,html,使用loader

2.exporting function：

var webpack = require('webpack');
module.exports = function(env) {
	return {
		entry: './src/js/index.js',
		output: {
			path: __dirname,
			filename: './dist/js/bundle.js'
		}
	}
}

3.导出Promise：

var webpack = require('webpack');
module.exports = function(env) {
	return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
			entry: './src/js/index.js',
			output: {
				path: __dirname,
				filename: './dist/js/bundle.js'
			}
		})
    }, 5000)
  })
}

4.导出多个配置：

// 导出多个配置
var webpack = require('webpack');
module.exports = [{
	entry: './src/js/index.js',
	output: {
		path: __dirname,
		filename: './dist/js/bundle.js'
	}
}, 
{
    entry: './src/js/list.js',
	output: {
		path: __dirname,
		filename: './dist/js/bundle-list.js'
	}
}]

配置文件参数

context

entry

output

webpack编译流程

1. 从 context 对应的文件夹开始…
2. …寻找 entry 里所有的文件名…
3. …然后读取它们的内容。在解析代码时，每一个通过 import（ES6） 或 require()（Node） 引入的依赖都会被打包到最终的构建结果当中。它会接着搜索那些依赖，以及那些依赖的依赖，直到“依赖树”的叶子节点 — 只打包它所需要的依赖，没有其他的东西。
4. 接着，Webpack 将所有东西打包到 output.path 对应的文件夹里，使用 output.filename 对应的命名模板来命名（[name] 被 entry 里的对象键值所替代）

eg

context与entry

context提供了entry的跟目录

entry：入口地址

可以为动态的：
    entry: () => './src/js/index.js',或是Promise()

eg

__dirname 指的是根目录

output

最重要的2个参数：

path：输出文件夹路径

filename：输出的文件名

publicPath： 上线路径

eg

filename中值含义：

hash

chunkhash

name(自定义的名字)

id(0,1,2)

hash与thunkhash的区别：

http://www.cnblogs.com/ihardcoder/p/5623411.html

resolve

eg