作者 : 

日期 : 

webpack the flexible module bundlerwebpack 是一款弹性打包工具，灵活，简单

install

webpack 是运行在 node.js 中的一款模块，所以直接使用 npm 安装

npm install webpack --global  我们需要全局安装 webpack, 与 gulp 一样需要在全局环境中注册 webpack cli 命令

npm install webpack --save-dev安装好全局 webpack 后，我们还需要在项目中安装 webpack 模块

config

在项目根目录中创建 ，此文件是对 webpack 的详细配置

使用 webpack cli 配置 webpack，需要返回一个对象module.exports = {    // configuration};

entry

定义入口文件，入口文件可以理解为一个网页，只有一个文件，通过入口文件自动的依赖其它 js 模块

{    entry: {    	//对单独的某一个文件打包        page1: "./page1",         //对多个文件打包，然后一起输出        page2: ["./entry1", "./entry2"]    }}

output

{    entry: {    	//对单独的某一个文件打包        page1: "./page1",         //对多个文件打包，然后一起输出        page2: ["./entry1", "./entry2"]    },    output: {		//输出目录		path: './built'		//输出地址，输出的事公共的 url 地址		publicPath: './built',        		//输出名称		filename: 'bundle.js',	}}

module

定制如何编译文件，具体设置某类文件该如何编译，与 gulp 中的 pipe 类似在 webpack 中任何文件都是一个模块，这个模块如何编译由 module 来决定

module.loaders

{	module : {		loaders : [			{					//判断需要满足编译条件的文件				test: /\.js[x]$/, //此处是正则表达式				//排除的文件，排除这个目录下的文件				exclude: /node_modules/,				//使用什么模块来编译				loader: ['babel'],				//可选配置，用于处理 loader 编译的编译配置参数				query : {									}			}		]	}}

resolve

配合模块使用, 该配置会覆盖 module.loaders 里的配置

{	resolve: {	    //定义模块查找从什么目录开始	    //必须是绝对路径	    root: [ path root ], 	    // 自动扩展文件后缀名，	    // require 模块时可以省略不写后缀名	    extensions: ['', '.js', '.json', '.scss'],	    // 模块别名定义，方便后续直接引用别名，无须多写长长的地址	    //	    alias: {	       // 与 require.js 中的 config.paths 一样  	    }	}}

快捷命令

webpack -w  监听文件变化webpack -d  源码输出webpack -p  压缩