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.ou

qq_28471389

5500人浏览 · 2021-08-12 15:49:29

qq_28471389 · 2021-08-12 15:49:29 发布

一安装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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^