webpack的使用

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 的状态

webpack的使用

 

  你修改js代码发现也自动部署上去了,但是页面的效果没改变

webpack的使用

 

  你可以访问一下自己的部署的位置如(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 //减小压力,用少量的补丁重新加载

 

  

webpack的使用

上一篇:JS promise对象


下一篇:渐进式web应用开发---service worker