webpack打包爬坑攻略

1、使用webpack打包项目时，遇见报错，如图：

解决办法：

1. 安装最新版本Node.js；
2. 在自己希望node.js安装的文件夹根目录下创建node_global和node_cache文件夹；
3. cmd命令窗口执行npm config set prefix "xx:\.......\node_global"和npm config set cache "xx:\.......\node_cache"；
4. 设置环境变量；
5. 在【系统变量】下新建NODE_PATH，输入xx:\......\node_global\node_modules；
6. 将【用户变量】下的Path修改为xx:\........\node_global；
7. cmd命令窗口执行命令npm install -g webpack安装webpack；
8. cmd命令窗口执行命令npm install webpack-cli -g安装webpack-cli；
9. 在VSCode编辑器的终端中再次执行命令全局安装webpack和webpack-cli；
10. 执行命令：webpack 当前入口文件的路径 希望打包后存放的路径进行打包；
11. 或者新建webpack.config.js配置文件后，直接终端执行webpack命令进行打包；

2、打包成功后，报mode的警告

在webpack.config.js配置文件中添加mode模式设置

webpack自动打包

1. 使用webpack-dev-server工具，实现自动打包编译；
2. 运行npm i webpack-dev-server -D 把工具安装到项目的本地开发依赖；
3. 安装完后，此工具的用法和webpack命令完全一致；
4. 但用脚本命令直接执行，会报错，如图：
5. 由于是在项目中本地安装的，所以无法把它当作脚本命令，在powershell终端中直接运行（只有安装到全局 -g的工具，才可以）；
   
6. 在package.json的scripts对象中添加"dev":"webpack-dev-server"；若没有此json文件，在项目的中终端中运行脚本命令npm init生成；
7. "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack-dev-server" },
8. 添加完后，运行命令npm run dev
9. 报错，如图：
   
10. 找到项目所在位置，删掉node_modules文件夹；
11. npm i重新装node_modules包；
12. 注意：webpack-dev-server这个工具，如果想正常运行，要求在本地项目中必须安装webpacknpm i webpack -D；
13. 若仍报如图所示错误，需要在项目本地安装webpack-cli包，npm i webpack-cli -D即可；
    
14. 再次重新执行命令npm run dev
    
15. 此时，每次更改js文件并保存后，它都会自动执行打包编译；并且显示访问路径
    
    访问后，如图，点击src就可以访问页面；
    
16. 但我们更改文件内容，虽然编译后，但是并没有作用到页面上，因为html引入的<script src="../dist/bundle.js"></script>和自动编译后生成的bundle.js并不是一个文件,因此在html文件中引入的时候应直接引入根目录下的<script src="/bundle.js"></script>
17. webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到实际的物理磁盘上，而是直接托管到了电脑的内存中，因此我们在项目根目录中根本找不到打包好的bundle.js文件；

webpack-dev-server配置方式

1、配置package.json文件中的dev属性参数：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

--open：浏览器自动打开server地址；
--port 端口号：指定端口号；
--contentBase 内容的根路径：通常为--contentBase src；
--hot：热重载/热更新。不设置hot，每次打包都会新生成一个bundle.js文件，设置hot，不重新生成，只局部更新代码，类似于打补丁；

2、配置webpack.config.js文件中的devServer属性参数：

const webpack = require('webpack')
...
devServer:{
	open:true,
	port:3000,
	contentBase:'src',
    hot:true,//配置热更新第一步  
},
plugins:[		//配置插件
	new webpack.HotModuleReplacementPlugin() //new一个热更新的模块对象 启用热更新第三步
]

注：配置热更新的步骤：
1、devServer中设置hot:true；
2、webpack.config.js文件头部引入webpackconst webpack = require('webpack')；
3、引入插件plugins属性，和devServer平级；

html-webpack-plugin的两个基本作用

当前，若注释掉引入bunle.js文件的语句，就丧失页面效果

<scirpt src="/bundle.js"></script>

若想把此文件也放进内存中，需要进行如下操作：
1、安装html-webpack-plugin插件

npm i html-webpack-plugin -D

2、在webpack.config.js文件中导入

const htmlWebpackPlugin = require ('html-webpack-plugin')

3、把插件放入到plugins中

plugins:[
	new htmlWebpackPlugin({
		
	})
]