VUE如何使⽤webpack进⾏项⽬打包⼀ 安装NODEJS，NPM
⼆建⼀个⽬录名⼦随意 在⽬录⾥打开终端运⾏npm init -y ⽣成package.json配制⽂件
三在⽬录⾥建⼀个src⽬录，建⼀个index.html  index.js⽂件（默认的打包⼊⼝就是src/index.js）
安装⼀个JQUERY包npm install jquery -S
四建⽴ fig.js 打包配制⽂件（这⾥可以通过entry.output设置打包⼊⼝⼊输出）
//如果上的的时候请把模式改成productiong
mode:"development"
}
package.json中添加以下配制
"scripts": {
/
/nmp run dev打包
"dev":"webpack"
},
五安装webpack包
npm install webpack@5.42.1 webpack-cli@4.7.2 -D  (注册-D 和-S的区别)
六编写页⾯INDEXHTML 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../dist/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
<li>这是⼀个LI列表</li>
</ul>webpack打包流程 面试
</body>
</html>
index.js代码
import $ from 'jquery'
$(function(){
$("li:odd").css("background","red")
$("li:even").css("background","pink")
console.log("122");
})
终端运⾏ npm run dev 默认会把js代码打包⽣成dist/main.js
七 每次修改代码要运⾏⼀次打包才能预览太⿇烦，我们可以通过安装和配置第三⽅插件，拓展webpack的能⼒，从⽽让webpack⽤起来更⽅便。
最常⽤的webpack插件是webpack-dev-server，类似于node.js阶段使⽤到的nodemon⼯具，每当修改源代码，webpack会⾃动 进⾏项⽬的打包和构建。
npm install webpack-dev-sever@3.11.2 -D
安装完成修改package.json配制
"scripts": {
//nmp run dev打包
"dev":"webpack server"
},
运⾏ npm run dev
浏览器⾥未运⾏localhost:8080⽂件
默认⽣成的main.js是存在要⽬录下内存⾥的，不会更新dist/main.js所以我们要想时时查看效果就更新下html中的JS引⽤/main.js
或者html-webpack-plugin  HTML插件类似于⼀个模板引擎，可通过此插件⾃定制index.html的内容
运⾏：npm install html-webpack-plugin -D
安装好后修改fig.js配制
具体的作⽤就是src的index.html复制⼀份到根⽬录下⾯，这个⽂件也是在内存中⽬录下看不到，但是可以访问的。
配制运⾏ run dev后⾃动打开浏览器
最后，发布项⽬
npm run build

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。