如何安装webpack及运行webpack

1、安装nrm:

npm install -g nrm

查看镜像

nrm ls

查看的结果：

npm ---------- https://registry.npmjs.org/

yarn --------- https://registry.yarnpkg.com/

tencent ------ https://mirrors.cloud.tencent.com/npm/

cnpm --------- https://r.cnpmjs.org/

taobao ------- https://registry.npmmirror.com/

npmMirror ---- https://skimdb.npmjs.com/registry/

使用镜像：

nrm use cnpm

2、安装webpack

本地安装：

npm install --save-dev webpack

全局安装

npm install --global webpack

使用：在建立的文件夹上鼠标右键，打开终端：

输入 npm init ：用于生成package.json文件

本地安装：

npm install --save-dev webpack

或者

npm install webpack -D

4.0以上版本需要安装

npm install webpack-cli

查看版本：

.\node_modules\.bin\webpack -v

运行webpack:

npx webpack

注意：

在查看版本时遇到困难时需要以管理员身凳键份运掘粗皮行vs code

在终端执行： get-ExecutionPolicy ，显示Restricted（表示状态是受限制的）

在终端执行： set-ExecutionPolicy RemoteSigned

在终端执行： get-ExecutionPolicy ，显示RemoteSigned

如何以管理员方式运行powershell

第1步： 同时按下 Windows + R 键以d出"运行"对话框。

第2步： 在框中键入PowerShell，然后单击OK (确定)按钮。普通的Windows PowerShell将以当前用户身份启动。

第判差3步： 键入命令 start-process PowerShell -verb runas ，然后按"enter"键。

第4步： 以上命令将以管理员身份提升Windows PowerShell的权限

step1: 创建一个项目录

注意：项目名一般 不要带中文

step2: 创建 package.json

或者：

step4: 处理第三方文件

html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不薯早识别的高级语法:

总结：webpack可以做两件事情况：

step5: 配置入口文件和出口文件

每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和宏锋出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包：

step6: 实现自动打包编译

每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack

在 package.json 文件中配置命令：

在终端中执行命令：

注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。

改变文件引用路径：

执行上述命令后终端会有类似信息输出：

【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上

【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问

【Content not from webpack is served from C:\Users\yfb\Desktop\前端学习案例4.27\wabpack\Demo_1\src】——不是通过webpack打包的文件，则是以src为根目录访问。

该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_modules平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。

因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:

step7: 自动打开浏览器进行访问、配置端口号、指定托管的根蔽手晌目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）

在 package.json 中配置命令，并重启服务器：

step8: 使用 html-webpack-plugin 插件

使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。

安装 html-webpack-plugin 插件：

在 webpack.config.js 配置文件中配置插件：

html-webpack-plugin 插件的两个作用：

step9: 处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。

处理css文件：

处理less样式文件

在全局下安装：悔咐胡npm  install  webpack  -g    

安装指定版本：npm 碧拦 install  webpack@版简信本号   -g 

卸载:npm  uninstall  webpack  -g

查看版本号:webpack -v

4.0以上webpack还要安装webpack-cli

npm install webpack-cli -g

---