webpack

nrm 安装

npm i nrm -g

不行就 sudo npm i nrm -g 安装

nrm ls

nrm use npm
nrm use cnpm

注意：
nrm 只是单纯的提供了 几个 常用的 下载包的 URL 地址，并能够让我们 这几个地址之间，很方便的进行切换， 但是，我们每次装包的时候，使用的装包工具
， 都是 npm

// cnpm 装包工具，和cnpm 镜像地址的区别
npm i cnpm -g

在网页中会引用那些常用的静态资源？？

JS
.js .jsx .coffee .ts(typeScript)
CSS
.css .less .saas .acss
Images
.jpg .png .gif .bmp .svg
字体文件 Fonts
.svg .ttf .eot .woff .woff2
模板文件
.ejs .jade
.vue 这是webpack中定义组件的方式，推荐这么用

网页中 引入的静态资源多了以后有什么问题？？？

1. 网页加载速度慢，因为我们要发起很多的二次请求！！！
2. 要处理错综复杂的依赖关系

如何解决上述两个问题

1.合并，压缩，精灵图，图片的base64编码。

2. 可以使用webpack解决各个包之间的复杂依赖关系

什么是webpack?

webpack是前端的一个项目构建工具，他是基于 Node.js 开发出来的一个前端工具。

如何完美实现上述的2种解决方案

1. 使用 Gulp， 是基于 task 任务的；
2. 使用webpack，是基于整个项目进行构建的；

借助于webpack 这个前端自动化构建工具，可以完美实现资源的合并，打包，压缩，混编等诸多功能。

根据官网的图片介绍webpack 打包的过程。

webpack 安装的两种方式

1. 运行 npm i webpack -g 全局安装webpack,这样就能在 全局使用 webpack的命令。
2. 在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中

npm init -y

npm i jquery -S

webpack

sudo npm i webpack-cli -g
sudo npm i webpack -g

webpack ./src/main.js -o ./dist/bundle.js

// 经过刚才的演示，webpack 可以做什么事情？？？
// 1. webpack 能够处理 JS 文件的相互依赖关系
// 2. 整个网站 只用一个 bundle.js
// 3. webpack 能够处理 JS 的兼容问题，把高级的，浏览器不识别的
语法，转化为低级的 浏览器能正常识别的语法。

// 刚才运行命令格式： webpack 要打包的文件的路径 打包好的文件的路径。

// 使用webpack-dev-server 这个工具，来实现自动打包编译的功能
// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到
// 项目的本地开发依赖。

✔ Installed 2 packages
✔ Linked 321 latest versions
✔ Run 0 scripts
peerDependencies WARNING webpack-dev-server@^3.10.3 requires a peer of webpack@^4.0.0 || ^5.0.0 but none was installed
peerDependencies WARNING [email protected] › webpack-dev-middleware@^3.7.2 requires a peer of webpack@^4.0.0 but none was installed
Recently updated (since 2020-02-25): 1 packages (detail see file /Users/penglimin/Desktop/FE_Web_RN/webpack_study/node_modules/.recently_updates.txt)
✔ All packages installed (360 packages installed from npm registry, used 32s(network 32s), speed 32.93kB/s, json 323(641.44kB), tarball 417.6kB)
hahaha-2:webpack_study penglimin$ cnpm i webpack -D

hahaha-2:webpack_study penglimin$ cnpm i webpack-cli -D

cnpm i html-webpack-plugin -D

cnpm i style-loader css-loader -D

cnpm i less-loader -D

cnpm i less -D

cnpm i sass-loader -D

cnpm i node-sass -D

cnpm i sass -D

cnpm i fibers -D

cnpm i url-loader file-loader -D

cnpm i bootstrap -S

第一套包：
cnpm i babel-core babel-loader bable-plugin-transform-runtime -D

第二套包：
cnpm i babel-preset-env babel-preset-stage-O -D

cnpm i vue-loader vue-template-compiler -D