webpack教程

https://www.bilibili.com/video/BV1pb411x7Y9?p=26

两节课

2021.1.5

第一节课
11分钟之前都是在总结爬虫部分内容，可直接跳过。

工具

1. 编译类

babel     es6-->es5

grunt/gulp(gulp是grunt的升级版本)  偏编译，但非纯编译。

2. 打包

browserify   一堆文件--->单个文件

http://browserify.org/  (官网)

3.开发辅助

borwser -sync    多端同步/多端联动  、 帮助测试、帮助开发

https://blog.csdn.net/qq_24504591/article/details/81668553

4.测试类（应该很熟）

单元测试、集成测试、压力测试.......

bug出现的时候，可以加到测试集合里或者用例里去（记录的重要性）。

webpack+插件
webpack单个起的作用有限，加上插件之后：编译、打包、调试、测试....

20分钟开始讲webpack.

一.安装

mac:

使用brew install webpack,居然可以用。（意外！）

下载了半天居然只是下载了node 和npm。

继续下载webpack依旧需要使用npm install -g webpack

ubuntu:

sudo apt install webpack（ubuntu）报错“ubuntu  Error: Cannot find module 'yargs'”

使用这个命令一起装可以解决这个问题：npm i webpack webpack-cli webpack-dev-server -D

（视频中的命令：cnpm  i -g  webpack (WIN?),我在ubuntu中使用该命令会报错。）

npm install webpack -g

webpack  -v:查看版本（直接使用webpack会报错？不知道影响？）

WIN10:

“DNS服务器对区域没有权威”解决办法：不要采用复制、查找的方法打开命令行界面。直接WIN+R。

cnpm安装的安装依赖于npm  npm的安装依赖于nodejs 。

nodejs的官网：https://nodejs.org/en/。傻瓜式安装，安装完之后再命令行中使用node -v查看。

比较好的介绍：

https://www.cnblogs.com/uniapp/p/13115877.html（有个介绍将cache global移动到D盘了。我没有该盘，报错。）

安装位置：C:\Program Files\nodejs

通过npm下载安装cnpm，常常需要添加额外的源（这里是taobao镜像源）：

npm install -g cnpm --registry=https://registry.npm.taobao.org
在CMD命令窗口中使用cd命令不起作用的解决方法：      输入D:切换到D盘，不要带cd。

如果添加不了，往往是环境变量没有加上：

NODE_PATH

C:\Users\Dell\node_modules(自己该)

二.编写配置

所有的浏览器包括node在内，都是无法识别import  export的，这是webpack存在的原因之一：可以将import、export打包处理，扎成一捆。

例子中出现了3个文件：一个含有import,一个含有export,一个是配置文件。

export(filename:mod1.js):

export default 16;
import(filename:1.js):

/*****其中abc为自定义，可以随便定义**********/
import abc from "mod1.js"
最终需要改成：
import abc from "./mod1.js";
console.log(abc);
webpack.config.js:

const pathlib=require("path");

module.exports={
// The 'mode' option has not been set, webpack will fallback to 'production' for this value.
// Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
mode:"development",

// /Users/a/node_modules/1.js doesn't exist
entry:"./1.js",
output:{
path:pathlib.resolve("./dest"),
filename:"after_pack.js"
}
}
webpack.config.js是最为重要的一步，有几个重要的地方需要注意：

1. mode:"development",最好不要省略不写，否则会报错：The 'mode' option has not been set, webpack will fallback to 'production' for this value.
   Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

2.所有的入口文件以及入口文件的相关部分都需要加上“./”。否则会报错：/Users/a/node_modules/1.js doesn't exist。与入口文件相关的1.js中引用的文件路径也同时的需要改写"./1.js"

3.j建议项目内安装。会省去很多意想不到的麻烦。

---

编译的时候，需要cd到当前的目录下。webpack.config.js也可以不写成“webpack.config.js”,如果不写成这种形式，则编译的时候需要添加一些编译变量。

如果配置文件是webpack.config.js,则编译的时候只需要webpack即可：

webpack
如果配置文件比较另类，比如改写成“1-base.webpack.js”[必须以“webpack.js”,以区分其他js文件],webpack  --config 文件名：

webpack --config 1-base.webpack.js

Export.  Import. 引入或者输出需要有具体的格式，可以自行查看mdn/w3c文档。——这个很重要，因为你不能只会一种格式。

常见的格式：

import 输入传递过来的变量：

import {a,b} from "./mod1.js";

console.log(a,b);
export作为借口输出出来的变量：

export let a=12,b=16;
总结es6模块化：【要是忘记了或者你需要某些特殊的输入-输出格式，可以自行文档】

export default  xxx;                     //作为模块本身被输出                         import abc from "xxx.js"(abc可以看作一个类或者类的别名)

export let a=12,b=15;                 //作为模块本身的内容被输出             import {a,b} from  "xxx.js"

---

webpack多接口的复合模式，推荐使用(单接口也可以使用！)：

const pathlib=require("path");

module.exports={
// The 'mode' option has not been set, webpack will fallback to 'production' for this value.
// Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
mode:"development",

// /Users/a/node_modules/1.js doesn't exist
entry:{
//此处的file1,file2文件名为随便取的，但是打包之后会以这个名字出现
file1:"./1.js",
file2:"./2.js"
},
output:{
path:pathlib.resolve("./dest"),
// filename:"[name].js"中的[name]为占位符。打包之后会出现多个打包文件。所以占位符较合适。
filename:"[name].js"
}
}

所有的涉及到入口/出口文件中数据的方法，都需要写到入口文件import中（建议起文件名的时候带上import）。浏览器依旧无法使用即使是打包后的bundle.js文件中的数据。

与视频中不同的是，不需要使用window.onload预加载：（想想也觉得无此必要）

import {a,b} from "./mod1.js";
import {c} from "./mod2.js"
import abc from "./mod3.js"
// console.log(a,b,c);
console.log(a,b,c);
alert(a);
alert(a+b+c);
alert(abc);
document.onclick=function(){
// alert(a+b+c);
console.log(a+b+c);
}

// window.onload=function(){
// // console.log(a,b,c);
//
// document.body.onclick=function(){
// // alert(a+b+c);
// console.log(a+b+c);
// }
// }

全局安装和项目内安装

与视频中的说法略有区别（视频中的版本是3.0版本，我的版本是5.0版本）

项目中安装的三种写法：

npm install webpack     / npm install --save-dev webpack   / npm install -D webpack

全局安装：

npm install -g webpack

在3.0版本中（2021.3，5.0版本），全局安装安装的是cli，项目安装安装的是库，打开对应的项目，会看到对应的库文件夹。

第二节课
单独的webpack只有打包的作用。需要一些插件。

dev-server：

webpack插件的一种。作用是用在开发的过程中：可以实现自动更新等操作。需要在原先的webpack中额外的新增一些配置。

课前解答：

容器=沙箱=“虚拟”技术，“独立的”电脑=自身的变量互相不影响。

webpack-dev-server  --watch  --inline

--inline 更新入口（import）文件

--watch 更新html

---

视频中的讲解比较坑，版本太低，很多内容有误，可以试试这个：

https://www.cnblogs.com/hezihao/p/8072750.html

个人觉得，webpack插件部分用处不大，像什么热更新之类的，暂时用不上。可以暂时放一放。等以后有了时间再来研究研究。