VUE如何使用webpack进行项目打包
一 安装NODEJS，NPM
二建一个目录名子随意 在目录里打开终端运行npm init -y 生成package.json配制文件
三在目录里建一个src目录，建一个index.html index.js文件（默认的打包入口就是src/index.js）
安装一个JQUERY包npm install jquery -S
四建立 webpack.config.js 打包配制文件（这里可以通过entry.output设置打包入口入输出）
module.exports={
//如果上的的时候请把模式改成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>
</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
安装好后修改webpack.config.js配制
具体的作用就是src的index.html复制一份到根目录下面,这个文件也是在内存中目录下看不到，但是可以访问的。
配制运行 run dev后自动打开浏览器
最后，发布项目
npm run build
1万+
656
515
暂无认证
到【灌水乐园】发言
