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)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182546238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
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)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182625493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
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)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182645710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
到这里你回到项目例看会看到 package.json文件 一切没问题
这里webpakc的入口默认为 src 下的index.js，出口默认为 ./dist
3.3创建与下图对应的目录(注意文件夹路径)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W9WjHRRy-1573467919787)(F:\CSDN发布记录\图片2\017.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182655217.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)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182707719.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)
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)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191111182728646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzNjQzNg==,size_16,color_FFFFFF,t_70)