Webpack打包机制的初步学习
webpack的安装
首先在全局环境安装webpack，安装webpack之前需要安装node（node的安装就不在这里详解了，没有安装或不知道怎么安装的可以去网上搜索）。
$ npm install -g webpack
安装webpack完成后，新建一个webpackTest文件夹作为项目所在目录，在项目的根目录新建一个index.html文件，并引入一个js文件bundle.js（现在还不知道这个文件是干嘛的，后期就会了解并使用它），bundle.js的文件是自定义的，任何名称都可以。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack打包工具</title> </head> <body> <script src="./bundle.js"></script> </body> </html>
初始化webpack
安装完成webpack之后，在终端里面进入webpackTest目录，使用命令（npm init）对项目进行初始化。初始化后会生成package.json文件，后期对项目安装的依赖包、项目的启动等操作都会在package.json文件里面配置。
$ npm init
运行webpack进行打包
在项目的根目录webpackTest下面新建一个app.js文件，作为webpack打包整个项目的入口文件，打包后会生成一个目标文件bundle.js（index.html里面引入的bundle.js就是这儿生成的）。
在终端里面进入项目的根目录，使用命令进行打包：
$ webpack app.js bundle.js
打包完成后就会生成目标文件bundle.js，在app.js文件里面写入代码，用浏览器打开index.html文件查看效果。
alert("Hello World!");
但是这时候每次修改app.js的内容后都需要使用webpack打包一次，才能更新目标文件bundle.js。这样就比较麻烦，如果我们对打包动作进行监听，只要app.js内容改变，就自动打包更新bundle.js内容，只需要给打包命令添加一个--watch参数就可以了：
$ webpack app.js bundle.js --watch
如何将JS进行模块化
将js进行模块化的时候需要用到module.exports输出和require引入，js中所有的数据格式都可以使用module.exports进行输出（字符串、数组、对象等），在需要调用的js文件里面使用require引入后就可以使用了。
我们在根目录新建一个people.js文件，在里面添加内容：
let people=[{name:"Herry"},{name:"Ocean"},{name:"Leo"}];
module.exports = people;
在app.js里面引入people.js文件,这时候就可以使用people.js里面的所有被module.xeposrts抛出的内容了，在刷新浏览器就可以查看修改内容：
let people = require("./people.js");
alert(people[0].name);
注意：我们使用模块化的js文件的时候分外用户自定义的与通过npm下载的第三方文件，如果是用户自定义的js文件，引入的时候需要写完整的相对路径，如果是使用npm下载的第三方js文件，引入的时候就只需要写文件名。
用户自定义people.js：require(“./people.js”)；
使用npm下载的第三方jquery.js文件：require(“jquery”)；
如何引入第三方插件
在项目开发的时候，很多时候我们都需要使用第三方插件，如jquery、bootstrap等等，所以对于第三方插件的使用也是非常重要的。使用第三方插件前我们需要通过npm下载插件：（npm install 可以简写为npm i）
$ npm i jquery
然后在app.js里面引入jquery，修改app.js代码如下，完成后在浏览器查看效果：
let people = require("./people.js");
let $ = require("jquery");
$.each(people, function(key, value){
$("body").append("<h1>"+people[key].name+"</h1>")
}
如何将es6转换为es5
由于现在es6的流行，很多项目js文件都会使用es6格式进行编写，而有些浏览器由于不能够完全支持es6，所以项目上线的时候需要使用babel等工具将es6转换为es5格式做到更好的兼容所有的浏览器，下面我们主要使用label进行转换。
转换依赖的文件主要有babel-core、babel-loader和babel-preset-es2015（这儿还只是准备工作，看不到效果，到后面我们就可以看效果了）
$ npm i babel-core babel-loader babel-preset-es2015 --save-dev
如何将静态文件模块化
我们项目中用到的静态文件主要有css文件、图片和图标等，这里我们主要以css进行讲解。先在根目录里面新建一个style.css文件,并添加一些样式，我们将css文件进行模块化前需要下载相应的的加载器，主要有style-loader和css-loader
$ npm i style-loader css-loader
在app.js文件里面引用css文件（我们很容易发现是在css的目录前面加了2个前缀），在浏览器里面就可以查看到相应的css样式改变了。
require(“!style-loader!css-loader!./style.css”)
如何配置webpack.config.js文件
从静态文件模块化我们就可以看出来，这种对每个文件都需要操作是比较麻烦，如果可以在一个地方配置后，所有同类文件都自动进行相同操作就比较人性化了，这时候就需要对webpack的配置文件进行操作了。
在项目根目录新建一个webpack.config.js文件，然后添加配置。webpack的基本配置主要有三个部分：入口文件、出口文件和模块加载器
module.exports = { //入口文件 entry: "./app.js", //出口文件 output:{ path: __dirname , filename: "bundle.js" }, //模块 module:{ //加载器 loaders:[ //css加载器 {test:/\.css$/,loader:"style-loader!css-loader"}, //将所有的.css结尾的文件都进行相同操作 //js加载器 { test:/\.js$/, loader:"babel-loader", exclude:/node-module/, query:{ presets:["es2015"] } } //将所有的以.js结尾的文件进行相同操作，不包含node_module里面的文件，查找到需要处理的是es2015文件 ] } }
修改app.js，主要是引入css文件不需要添加前缀了：
require("./style.css");
代码中所有的es6语法在生成的目标文件bundle.js里面都会转换成es5的语法，可以在bundle.js里面进行查看（主要将people变量声明的let转换为var）。
如何使用package.json启动项目
我们前面所有的开发都是在浏览器中打开本地文件，但是实际开发中我们有些操作必须在服务器上面启动项目才能实现，比如对后台数据的操作等。webpack也为我们准备相应的功能，这时候我们主要使用的是webpack提供的工具webpack-dev-server：
$ npm i webpack-dev-server --saver-dev
安装webpack-dev-server完成后，我们还需要对package.json的scripts对象进行配置：
"start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",
"build": "webpack"
指令：start
工具：webpack-dev-server
入口：--entry ./src/js/app.js
出口：--outpt-filename ./dist/bundel.js
进入终端，在根目录输入npm (run) start指令webpack就会帮我启动一个web服务，默认8080端口，在浏览器输入localhost:8080就可以看到效果了：
$ npm start
（end）
下一节我会写上使用webpack构建一个vue2的基本开发环境。
