webpack安装教程

最新推荐文章于 2023-07-03 14:58:46 发布

qindayong！

最新推荐文章于 2023-07-03 14:58:46 发布

阅读量625

点赞数 1

分类专栏：工具安装 vue

本文链接：https://blog.csdn.net/weixin_44036436/article/details/103014964

版权

vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

工具安装

5 篇文章 1 订阅

订阅专栏

在这里插入图片描述

webpack安装教程

webpack4.0后的安装教程

1.在安装webpack前，你必须为本机安装 node.js

1.1下载安装好后

1.2打开命令行执行命令

node -v // 查看node的版本

npm -v //查看npm的版本

都正常显示版本号，那就安转成功了可以进行webpack的安装了。

2.打开命令行（win+R 输入cmd）

webpack的安装，webpack的安装有全局安装与仅该项目安装，官方不建议全局安装，网上的教程基本是全局安装，即使你全局安装了，你依旧需要再次为项目安装。全局安装可能会造成项目中的指向的是全局安装的webpack;

由于webpack4后的版本，命令迁移至webpack-cli，因此还需安装webpack-cli

2.1在命令提示行执行命令:

 npm install webpack webpack-cli -g --save-dev -g

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fj9dVENy-1573467919779)(F:\CSDN发布记录\图片2\013.png)]$

2.2安装完成后输入webpack -v 如果出现版本号就说明安装成功 ,跳转至教程第3步;

如果出现 'webpack -v' 不是内部或外部命令，也不是可运行的程序或批处理文件。

说明需要配置环境变量;步骤:我的电脑—>右击—>属性—>高级系统设置—>高级—>环境变量—>在系统变量里面寻找path—>双击打开—>点击新建(图像2.2.1)—>输入安装位置,截止到npm这一层目录(具体见图像2.2.2)—>确定,保存—>重新打开命令提示行,—>输入webpack -v —>返回教程2.2;

图像2.2.1

在这里插入图片描述

图像2.2.2

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TIxYGz2p-1573467919784)(F:\CSDN发布记录\图片2\014.png)]$

3为项目安装，找到你该项目的根路径位置,打开命令提示行(cmd)

3.1输入命令 npm install webpack webpack-cli --save-dev

安装后你会发现你项目下多了node_moudle文件 package_lock.json文件；说明你成功安装好了

3.2再在命令行初始化项目执行命令 npm init 一直回车,出现下图最后一行,在回车

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBTYvw0L-1573467919785)(F:\CSDN发布记录\图片2\016.png)]$

到这里你回到项目例看会看到 package.json文件一切没问题

这里webpakc的入口默认为 src 下的index.js，出口默认为 ./dist

3.3创建与下图对应的目录(注意文件夹路径)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W9WjHRRy-1573467919787)(F:\CSDN发布记录\图片2\017.png)]$

4测试webpack

4.1在项目根路径下打开cmd输入npm ijquery安装jquery,方便测试;

4.2在index.html里面输入以下内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="main.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
		</ul>
	</body>
</html>

4.3在index.js里面输入一下内容

import $ from 'jquery'
$(function(){
	 $('li:odd').css('color','red')
})

4.4打开当前项目根目录下的命令提示行(cmd)输入webpack ./src/index.js -o ./dist/bundle.js 等待…

4.5出现类似下图,表示成功;

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OstPpqDq-1573467919788)(F:\CSDN发布记录\图片2\018.png)]$

4.6打开index.html替换为以下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="main.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="../dist/bundle.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
		</ul>
	</body>
</html>

4.6运行index.html出现下图,教程结束:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ej7kXds3-1573467919789)(F:\CSDN发布记录\图片2\019.png)]$

qindayong！

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
webpack安装教程

webpack安装教程webpack4.0后的安装教程1.在安装webpack前，你必须为本机安装 node.js1.1下载安装好后1.2打开命令行执行命令 node -v // 查看node的版本 npm -v //查看npm的版本都正常显示版本号，那就安转成功了可以进行webpack的安装了。2.打开命令行（win+R 输入cmd）webpac...
复制链接

扫一扫