webpack其实没那么可怕——官方文档解读

原文链接： http://shuaihua.cc/article/webpack/webpack.php   

0、准备工作

• 1、下载nodeJS>> NodeJS官方网站
• 2、下载Git>> Git官网

下载完node.js之后根据安装提示一步步安装即可，node.js的兴起带来了一款叫做npm的包管理器

webpack模块可以被npm包管理器安装

安装webpack

//在全局安装webpack使用以下命令。
$ npm install -g webpack

webpack已经安装到计算机上，现在可以使用webpack命令了。

1、在项目中使用webpack

使用以下命令在项目根目录下生成package.json文件

$ npm init
	

使用sublimetext编辑器打开package.json文件应该是这个样子的。

2、安装webpack到项目中

将webpack加入到pageage.json配制文件中，使用以下命令

$ npm install --save-dev webpack
	

此时再看package.json文件，对比package.json刚刚创建时，新增加了一段代码。

"devDependencies": {
		"webpack": "^1.13.2"
	}

webpack依赖模块已经配置到我们的项目中了，并且项目目录中新增了一个node_modules的文件夹，打开文件夹可以看到我们刚刚安装的webpack模块。

3、webpack的版本

目前有两个可用的webpack版本，分为标准和测试版，测试版使用-beta标记区分。测试版包含不稳定和带有实验性质的特征，并且没有全面的测试。所以你应该使用标准版的webpack。

//后缀版本号安装相应版本
	$ npm install webpack@1.2.x --save-dev

4、开发工具

webpack-dev-server模块能快速配置一个本地的服务器，并且当每次保存修改过的代码后，测试服务器将立即自动刷新页面，省去了每次都要手动打包编译代码和刷新页面的的麻烦。

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

5、配置webpack.config.js文件

接下来就小试牛刀，使用使用webpack做一个非常非常简单的操作。

• 首先在项目根目录下新建两个文件夹，一个叫app，用来存放为打包前的源代码；另一个目录就叫dist，用来存放webpack打包输出后的文件。

• 接着，在dist文件夹中新建一个html文档，我命名为index.html，并搭建好html文档的基本结构。

• 之后，我们在app文件夹中新建一个js文件，命名为data.js，使用module.exports暴露一个接口。

  

• 之后，新建一个index.js的文件，将data.js文件引入进来，编写javascript脚本将数据渲染到页面上。

  

• 之后我们来配置webpack.config.js文件，将app文件夹中的index.js文件及其所有的依赖文件（目前只有data.js）打包编译成一个压缩的javascript文件。在项目根目录新建一个命名为webpack.config.js（webpack配置文件的默认写法，当然也可以自定义，后续再说。），开始写配置项。

  

• webpack.config.js配置文件写好之后，在项目根目录打开git命令行面板，输入webpack，此时dist文件夹中就生成了webpack.config.js文件中定义的index.bundle.js输出文件了。

  

• 不要忘了我们的冷落了半天的index.html，在html文档的末尾添加javascript文件引用，引用刚刚新鲜出炉的index.bundle.js文件到index.html中。

  

5、详解webpack.config.js配置

· 使用命令行配置

如果使用命令行工具（如git），命令行默认将读取webpack.config.js文件来打包源文件

//当在命令行输入webpack时，默认使用webpack.config.js文件配置
$ webpack

当然我们也可以自定义webpack的配置文件，如果使用自定义配置文件，可以这样写。

//使用自定义的webpack配置文件
$ webpack --config webpack.config_test.js
//--config选项告诉webpack使用webpack.config_test.js作为配置文件

那么，这个配置文件结构是怎么样的呢？

//webpack.config.js
module.exports = {
	//这里填写配置项
}

从上面代码可以发现，webpack.config.js文件输出了配置对象。

· 使用node.js API配置

如果我们使用node.js API，我们就需要通过参数来传递配置对象，如下代码。

webpack({
	//配置项在这里填写
},function(){
	//回调函数
})

· 更复杂的配置项

//在命令行中编译文件使用如下命令
$ webpack app.js app.bundle.js

上方命令执行后，将把app.js编译成app.bundle.js文件

使用命令行的缺点就是我们每次要编译编写的代码时，都要写这么长的命令，如果我们设置妥当的webpack.config.js配置文件，那么webpack可以监听文件改变，自动的执行编译打包命令

//监听文件改变，自动编译
$ webpack -w

· 配置文件怎么写？

首先我们必须清楚，一提到配置文件，并不一定严格按照json格式编码，所以我们不需要写非常纯正的JSON语法到配制文件中，只需要使用Javascript语法即可，因为它只是node.js的一个模块

下面是一个非常简单的配置对象例子：

{
	context: __dirname + "/app",
	entry: "./entry",
	output: {
		path: __dirname + "/dist",
		filename: "bundle.js"
	}
}

• context

  上下文选项用来决定根目录（即绝对路径）的入口文件

• entry

  打包文件的入口点。

  1、如果我们给entry复赋值一个字符串：这个字符串将会在开始编译的时候被加载。

  entry: "./app.js"

  2、如果我们给entry赋值一个数组：这个数组中的所有模块在编译启动时都将被加载，对后一个数组元素将被输出。

  entry: ["./entry1.js","./entry2.js"]

  3.如果我们给entry赋值一个对象，那么我们就创建了多个入口的绑定，对象的“键”名可以在output中使用name获取到，“值”可以是一个字符串也可以是一个数组。

  {
  	entry:{
  		page1: "./page1.js",
  		page2: ["./entry1.js","./entry2.js"]
  	},
  	output:{
  		filename: "[name].bundle.js",
  		chunkFilename: "[id].bundle.js"
  	}
  }

• output

  output选项告诉webpack如何编译文件到硬盘中，值得注意的是，虽然entry中可以使用一个对象传入多个入口点文件，但是只能给ouput设置一个配置项

  output.filename

  这里定义了输出的文件名，谨记只能填写文件名，不能包含目录。

  output.path

  这个选项告诉webpack要把编译后的文件输出到硬盘的什么位置上，filename被用来确保输在这个目录中的文件是独一无二的。

  单入口文件的写法

  {
  	entry: "./src/app.js",
  	output: {
  		path: "./bulit"
  		filename: "bundle.js"
  	}
  }

  多入口文件的写法

  {
  	entry: {
  		app: "./src/app.js",
  		search: "./src/search.js"
  	},
  	output:{
  		filename: "[name].js",
  		path: __dirname + "/built"
  	}
  }

• output.publicPath

  publicPath用来指定输出文件的公共URL地址，当我们在浏览器浏览的时候需要配置它

  
  //config.js
  output:{
  	path: "/home/proj/public/assets",
  	publicPath: "/assets/"
  }
  //index.html
  
  	
  
  

以上就是webpack最长用的配置项，下面是更高级的配置，比如使用ES6（ES2015）的语法需要配置babel-loader，在js中引入css样式文件如要style-loader、css-loader，开发react应用需要配置react加载器等等。

下载loaders加载器

下面是开发基于react的webapp时需要配置的项。

首先要用npm下载这些模块们

//下载babel-loader模块
$ npm install --save-dev babel-loader
//下载babel-preset-es2015，这样确保babel能解析ES6的最新特性
$ npm install --save-dev babel-preset-es2015
//下载react模块
$ npm install -save-dev react
//下载babel-preset-react，babel才能解析react的语法特性
$ npm install --save-dev babel-preset-react

<<<babel官网>>>

Babel是一个转换编译器，它能将ES6转换成可以在浏览器中运行的代码。Babel是所有ES6转换编译器中与ES6规范兼容度最高的，甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6的所有新特性，而且不会影响与老版本浏览器的兼容性。此外，它还支持许多不同的构建测试系统，使开发者很容易将它集成到自己的工具链中。

在webpack.config.js中配置loaders

module: {
	loaders: [
		{
			test: /\.jsx$/, 
			loader: 'babel-loader', 
			query:{
				presets:['es2015','react']
			}
		}
	]
},

这样我们就能借助webpack这个神奇的工具专注于webapp开发本身，而不必为其他不必要的琐事搅扰~