1、使用webpack打包项目时,遇见报错,如图:
解决办法:
- 安装最新版本Node.js;
- 在自己希望node.js安装的文件夹根目录下创建
node_global
和node_cache
文件夹; - cmd命令窗口执行
npm config set prefix "xx:\.......\node_global"
和npm config set cache "xx:\.......\node_cache"
; - 设置环境变量;
- 在【系统变量】下新建
NODE_PATH
,输入xx:\......\node_global\node_modules
; - 将【用户变量】下的
Path
修改为xx:\........\node_global
; - cmd命令窗口执行命令
npm install -g webpack
安装webpack; - cmd命令窗口执行命令
npm install webpack-cli -g
安装webpack-cli; - 在VSCode编辑器的终端中再次执行命令全局安装webpack和webpack-cli;
- 执行命令:
webpack 当前入口文件的路径 希望打包后存放的路径
进行打包; - 或者新建
webpack.config.js
配置文件后,直接终端执行webpack
命令进行打包;
2、打包成功后,报mode的警告
在webpack.config.js配置文件中添加mode模式设置
webpack自动打包
- 使用webpack-dev-server工具,实现自动打包编译;
- 运行npm i webpack-dev-server -D 把工具安装到项目的本地开发依赖;
- 安装完后,此工具的用法和webpack命令完全一致;
- 但用脚本命令直接执行,会报错,如图:
- 由于是在项目中本地安装的,所以无法把它当作脚本命令,在powershell终端中直接运行(只有安装到全局 -g的工具,才可以);
- 在package.json的scripts对象中添加
"dev":"webpack-dev-server"
;若没有此json文件,在项目的中终端中运行脚本命令npm init
生成; "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack-dev-server" },
- 添加完后,运行命令
npm run dev
- 报错,如图:
- 找到项目所在位置,删掉node_modules文件夹;
npm i
重新装node_modules包;- 注意:webpack-dev-server这个工具,如果想正常运行,要求在本地项目中必须安装webpack
npm i webpack -D
; - 若仍报如图所示错误,需要在项目本地安装
webpack-cli
包,npm i webpack-cli -D
即可;
- 再次重新执行命令
npm run dev
- 此时,每次更改js文件并保存后,它都会自动执行打包编译;并且显示访问路径
访问后,如图,点击src就可以访问页面;
- 但我们更改文件内容,虽然编译后,但是并没有作用到页面上,因为html引入的
<script src="../dist/bundle.js"></script>
和自动编译后生成的bundle.js
并不是一个文件,因此在html文件中引入的时候应直接引入根目录下的<script src="/bundle.js"></script>
- 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({
})
]