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 webpack@3.6.0 -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]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就能够打包出几个文件。