webpack的基础介绍

webpack 是一个模块打包器。

它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

webpack js/main.js dist/all.js

此时，两个js文件：main.js、yuan.js被打包成为了一个js文件。

为什么说webapck是智能打包、智能合并：

⦁ webpack不是无脑合并js文件！和我们今后要学习的Grunt、Gulp不同；
⦁ webpack是按图索骥的，只有require链中出现的js文件，才会被打包到all.js文件中！
⦁ 如果多个文件都require了某文件，这个文件只会在all.js中出现一次。

注意，每次修改这些文件里的东西，webpack就会全部打包一次，然后就要重新输入一次命令webpack js/main.js dist/all.js，然后

3 webpack.config.js文件

就有了 webpack.config.js文件，，按照下面的配置完，
webpack就知道自己找入口文件了，自己合并到产出文件了，自己监听文件的变化了。

var path = require("path");

//进行配置的东西，实际上是本文件的暴露项，要写module.exports
module.exports = {
	//配置入口文件
	entry : "./js/main.js" ,
	//配置产出文件
	output : {
		//产出文件文件夹
		path : path.resolve(__dirname , "dist") ,
		//产出文件的文件名
		filename : "all.js"
	},
	//实时监测文件更新，一旦文件更新了，就重新合并打包一份
	watch : true
}

写完这个文件之后，我们就能在项目的根目录打开CMD窗口，输入简单的命令：
webpack

4 loader

安装babel-loader和babel-core（babel核心）：
cnpm install --save-dev babel-loader babel-core
还要安装babel的一个preset：
cnpm install --save-dev babel-preset-es2015

module.exports = {
	//配置入口文件
	entry : "./js/main.js" ,
	//配置产出文件
	output : {
		//产出文件文件夹
		path : path.resolve(__dirname , "dist") ,
		//产出文件的文件名
		filename : "all.js"
	},
	module : {
		rules : [
			{
				"test" : /\.js$/ ,
				"use" : [
					{
						"loader" : "babel-loader" , 
						"options" : {
							"presets" : ["es2015"]
						}
					}
				]
			}
		]
	},
	//实时监测文件更新，一旦文件更新了，就重新合并打包一份
	watch : true
}

当我们还想使用更高级语法，比如强制解构，此时要装babel插件。
安装依赖：
cnpm install --save-dev babel-plugin-transform-object-rest-spread

加入下面的代码在options中
"plugins" : ["transform-object-rest-spread"]