1.创建项目
2.导入node.js库
npm init -y
下载jquery包
npm i jquery -s
3.导入webpack库
将自己的js文件让webpack管理
webpack ./src/main.js -o ./dist/bundle.js //高版本
webpack ./src/main.js ./dist/bundle.js //低版本
每次都要修改main.js 都要输入 webpack ./src/main.js -o ./dist/bundle.js 很麻烦,所以配置webpack配置文件
4.创建webpack.config.js文件
1 const path = require(‘path‘) 2 //这个配置文件,起始就一个js文件,通过Node 中的模板操作,向外暴露了一个配置的对象 3 module.exports = { 4 // 手动指定入口 和 出口 5 entry: path.join(__dirname,‘./src/main.js‘), //入口,表示webpack打包的文件 6 output:{ 7 //输出文件相关的配置 8 path :path.join(__dirname,‘./dist‘),//指定 打包好的文件,输出到哪个目录中去 9 filename:‘bundle.js‘//指定 输出的文件的名称 10 } 11 }
然后就可以只用输入webpack 加载就行了
5.但是还是每次还是要输入webpack
使用webpack-dev-server
npm i webpack-dev-server -D //项目的本地开发依赖
注意 webpack-dev-server 需要 webpack依赖如果没有加
npm i webpack -d
注意:node_modules 文件出现了文件出现了问题 将它干掉重新加载
npm i
打开package.json 添加 第8行代码("dev": "webpack-dev-server")
1 { 2 "name": "webpack_Demo", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "dev": "webpack-dev-server" 9 }, 10 "keywords": [], 11 "author": "", 12 "license": "ISC", 13 "dependencies": { 14 "jquery": "^3.5.1" 15 }, 16 "devDependencies": { 17 "webpack": "^3.8.0", 18 "webpack-dev-server": "^2.9.7" 19 } 20 }
6.可以使用了
npm run dev
如果是下图就是ok 的状态
你修改js代码发现也自动部署上去了,但是页面的效果没改变
你可以访问一下自己的部署的位置如(http://localhost:8081/bundle.js) 你发现就是你的 dist 中的 bundle.js 但是你的项目的 bundle.js 引用的位置是http://localhost:8081/dist/bundle.js 这个两个js文件是不相同的
所以项目中js 换成 http://localhost:8081/bundle.js 的位置 例如:
为修改前
<script src="./dist/bundle.js"></script>
修改后
<script src="/bundle.js"></script>
然后你查看页面可以自动刷新了
wedpack-dev-server 常用语法 修改package.json
1 { 2 "name": "webpack_Demo", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "dev": "webpack-dev-server --open --port 8082 --contentBase src" 9 }, 10 "keywords": [], 11 "author": "", 12 "license": "ISC", 13 "dependencies": { 14 "jquery": "^3.5.1" 15 }, 16 "devDependencies": { 17 "webpack": "^3.8.0", 18 "webpack-dev-server": "^2.9.7" 19 } 20 }
--open //自动打页面
--port //修改端口
--contentBase src //默认打开页面的位置
--rot //减小压力,用少量的补丁重新加载