webpack之初体验

最近在学习javascript高级和ES6的一些内容，为了适应未来去公司的节奏，准备先入门下react，在学习过程中发现在开始就要先配一下webpack的环境~

看来有很多要学的…
在学习前：

Node： 直接在官网对应下载就好，不需要什么特殊操作

https://nodejs.org/zh-cn/
https://nodejs.org/en/download/
在英文官方网站中下载注意在LTS下选择.msi后缀的文件进行下载

具体安装呢

https://www.runoob.com/nodejs/nodejs-install-setup.html
看菜鸟教程就好

再往后看：
基本Nodejs知识，不具备…
npm指令，不具备…
熟悉ES6语法，哎，这个害行。

webpack简介

webpack是一种前端资源构建工具
在终端中，使用npm指令：npm i -y初始化
之后创建less的css预处理器，但是发现css样式没有生效，原因：需要将less文件编译成css；也可以试着安装jQuery：npm i jquery ，引入后，打开index.html后发现并没有生效：原因是ES6语法不支持

因此不管是css还是js都需要重新编译，所以需要构建工具集中编译。

所以，在webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

webpack五个核心概念

Entry，Output，Loader，Plugins，Mode
Entry：
入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

Output：
输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。

Loader：
Loader让webpack能够处理那些非javascript文件（webpack自身只理解javascript）
所以借loader翻译img，css成webpack能识别的资源

Plugins：
插件（Plugins）可以用于执行范围更广的任务。插件的范围包括：打包优化和压缩，重新定义环境中的变量

Mode：

简单来说：development本地—配置简单
production开发模式—优化（性能最好）

webpack的初体验

0.创建好初始文件夹，并在VSCode中打开
1.在此文件上打开终端
2.初始化一个包描述文件：npm init -y
3.初始化之后下webpack的包，分为全局包（-g）和本地包（-D）
全局安装webpack包和webpack-cli包：npm i webpack webpack-cli -g。全局安装的好处是：可以直接通过指令直接调用这两个包（直接在终端中输入webpack就可以看到有关于它的一些信息）

Hash值是一个结果，每次打包都会生成一个唯一的hash值（类似id）
version是版本号
time是打包花费时间（？不确定）
built at 是打包的具体时间
下一栏是一个表格
built.js是输出的文件，大小4.18kb 属于main的chunk

4.安装好之后：再本地安装：npm i webpack webpack-cli -D（webpack就安装到了package.json中的开发依赖）
5.在项目下新建一个目录src，表示源代码目录，然后新建目录build（后期会改成dist目录），表示代码输出的目录（也就是产品）
6.在src文件夹下新建一个index.js文件作为起点文件
7.然后输入webpack ./src/index.js -o ./build/built.js --mode=development，若将development改为production，打开build.js发现代码挤在了一坨，代码被压缩

下面验证webpack可以打包js资源和json资源，但却不能打包img和css资源

1.在src下创建data.json，写入：

{
    "name": "pdd",
    "age": 18
}

2.回到index.js中，使用ES6 model（？），写入：

import data from './data.json';
console.log(data);

写完之后要再进行一次打包，因为要更新built.js文件，不然就是上一次的文件
3.重新打包，在终端里按“↑”键，输入webpack ./src/index.js -o ./build/built.js --mode=development
然后打开built.js文件里的新写的data.json文件也引入了进来

4.再打开index.html，然后刷新按F12发现运行没问题
引入样式文件再打包一次

import './index.css'

发现打包失败

结论：
(1)webpack能处理 js/json资源，不能处理css/img等其他资源
(2)生产环境和开发环境能将ES6模块化编译成浏览器能识别的模块化
(3)生产环境比开发环境多一个压缩js代码，其他目前看不出来