webpack的学习之路~~第一天

第01节：认识WebPack的作用：

1. 学习的一原因：

现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决SCSS，Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。

现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。

React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack
从此可以看出，无论你前端走那条线，你都要有很强的Webpack知识，才能祝你成为这个框架领域的大牛。

2.对webpack的理解：

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

这段话有三个重点：

打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。
我们可以从下图再次了解一下WebPack的作用:

第02节：让你快速上手一个Demo

引用文字
如果webpack是最新版本（目前是：4.7.0），在执行webpack命令时，经常会出现提示安装webpack-cli，个人由于偷懒一点，在网上找了一些方法，由于才刚入门还不太理解，就退回3.6.0版本了。方法：先在package-json文件中把之前版本号改成需要的版本号（我的是4.7.0—>3.6.0,如图所示：
）
接着删除了node_modules文件，最后在终端输入命令：cnpm install [email protected] -g
，在终端输入webpack -v出现版本号，结果如下即可：

1. 建立基本项目结构

首先建立webpack_demo文件（每个人建立的位置不同，可能建立在了D盘或者E盘）。在该文件的根目录下建立两个文件夹，分别是src文件夹和dist文件夹：

src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。

编写程序文件：
文件夹建立好后，我们在dist文件下手动建立一个index.html文件，并写入下面的代码。
（代码略）

2.第一次Webpack打包

Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：
webpack {entry file} {destination for bundled file}
{entery file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。
注意：在命令行中是不需要写{ }的。

第03节：配置文件：入口和出口

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。

entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
module：配置模块，主要是解析CSS和图片转换压缩等功能。
plugins：配置插件，根据你的需要配置不同功能的插件。
devServer：配置开发服务功能，后期我们会详细讲解。

1.entry选项（入口配置）

这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS…..）。这里要填写的是src目录下的entery.js文件。

//入口文件的配置项
entry:{

//里面的entery是可以随便写的
entry:'./src/entry.js'

},

2.output选项（出口配置）

出口配置是用来告诉webpack最后打包文件的地址和文件名称的。按照上节课的操作，应该打包到dist目录下。在编写出口文件时，我们需要用到一点Node的知识，如果你还不会Node也没有 关系，就简单的两句代码，你记住就可以了（老师如是说）。

//出口文件的配置项
output:{

//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'bundle.js'

},

• 列表如果你只这样写，是会报错的：找不到path这个东西。所以我们要在webpack.config.js的头部引入path，代码如下：

const path = require('path');

这里我们使用了const，这是ES6的语法，如果你对ES6还不熟悉，也可以看技术胖ES6的课程哦（http://jspang.com/2017/06/03/...）。

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

（filename:是打包后的文件名称，这里我们起名为bundle.js。）

3.现在是webpack.config.js的完整代码：

const path = require('path');
module.exports={

//入口文件的配置项
entry:{
    entry:'./src/entry.js'
},
//出口文件的配置项
output:{
    //输出的路径，用了Node语法
    path:path.resolve(__dirname,'dist'),
    //输出的文件名称
    filename:'bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}

}
4.这个代码写完后，可以在终端中直接输入webpack就会进行打包。

在实际开发中我们都是通过配置文件进行打包的，所以必须要掌握好。

5.多入口、多出口配置

Webpack在版本1的时候很难设置多出口文件，但是在2版本开始就变的很方便了。直接看多入口和多出口的文件配置，然后可以和单一出口对比一下，你会发现这种设置非常简单（只需改动两点配置就可以）。
const path = require('path');
module.exports={

//入口文件的配置项
entry:{
    entry:'./src/entry.js',
    //这里我们又引入了一个入口文件
    entry2:'./src/entry2.js'
},
//出口文件的配置项
output:{
    //输出的路径，用了Node语法
    path:path.resolve(__dirname,'dist'),
    //输出的文件名称
    filename:'[name].js'
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}

}

• [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。