VUE如何使用webpack进行项目打包

最新推荐文章于 2024-02-18 00:22:22 发布

qq_28471389

最新推荐文章于 2024-02-18 00:22:22 发布

阅读量5.3k

点赞数 1

分类专栏： javascript VUE 文章标签： npm webpack

本文链接：https://blog.csdn.net/qq_28471389/article/details/119645971

版权

javascript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

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

qq_28471389

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
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={ //如果上的的时候...
复制链接

扫一扫