webpack-dev-server插件安装配置后不能及时更新问题
文章描述：
npm使用webpack-dev-server插件安装配置后不能及时更新问题
package.json
npm init -yjquery
npm install jquery -Snode_modules、jquery配置
安装webpack、webpack-cli
npm install webpack@5.47.1 webpack-cli@4.10.0 -D安装最新版本
npm install webpack webpack-cli -D卸载
npm uninstall webpack webpack-cli -g安装webpack-dev-server
npm install webpack-dev-server@3.11.2 -Dindex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../dist/main.js"></script>
<script src="../dist/bundle.js"></script>
<style>
.item{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
</html>index.js
// 1.使用ES6导入语法， 导入jQuery
import $ from 'jquery'
$(function(){
console.log('index.js')
$('.item').css('background-color','red')
})
package.json
"scripts": {
"dev": "webpack"
},
webpack.config.js
const path = require('path')
module.exports = {
// 代表 webpack 运行的模式，可选值有两个 development 和 production
mode:'development',
entry:path.join(__dirname,'./src/index1.js'),
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
}
}
运行
npm run dev
然后在package.json script dev添加serve
再次运行npm run dev
浏览器访问http://localhost:8080/src/index.html
浏览器访问http://localhost:8080/bundle.js
发现这个文件存在，这是因为 webpack-dev-server 插件，把生成的文件，不会直接存在 本地磁盘上，会直接存在内存中。因此，我们不能直接在html文件中引用本地 dist 中，打包好的文件，需要改变路径。
index.html
<script src="../bundle.js"></script>ok
发布时间：2022/07/01
发表评论