第一节：webpack的认识与安装配置

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
1、打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
2、转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
3、优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

//全局安装
npm install -g webpack

注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

npm install --save-dev webpack
//webpack4.0之后还需要安装下面的
npm install --save-dev webpack-cli

这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。
开发环境and生产环境：
开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。

webpack -v
//查看webpack的版本，如果输出了版本，则表示安装成功

如果项目已经存在webpack，需要更新webpack到最新的话

//在package.json中找到webpack，改成最新的版本，然后执行下面的命令
cnpm install

配置文件webpack.config.js
根目录下面创建配置文件webpack.config.js文件。

const  path  =  `require`('path');
module.exports={
    //入口文件的配置项
    //配置入口文件的地址，可以是单一入口，也可以是多入口。
    entry:{
        entry:'./src/entry.js',
        //这里我们又引入了一个入口文件
        entry2:'./src/entry2.js'
	},
    //出口文件的配置项
    //配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
    output:{
         //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'[name].js'
        //[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
    },
    //模块：例如解读CSS,图片如何转换，压缩
    //配置模块，主要是解析CSS和图片转换压缩等功能。
    module:{},
    //插件，用于生产模版和各项功能
    //配置插件，根据你的需要配置不同功能的插件。
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

path.resolve(__dirname,’dist’)就是获取了项目的绝对路径