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
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
3为项目安装,找到你该项目的根路径位置,打开命令提示行(cmd)
3.1输入命令 npm install webpack webpack-cli --save-dev
安装后你会发现你项目下多了node_moudle文件 package_lock.json文件;说明你成功安装好了
3.2再在命令行初始化项目执行命令 npm init
一直回车,出现下图最后一行,在回车
到这里你回到项目例看会看到 package.json文件 一切没问题
这里webpakc的入口默认为 src 下的index.js,出口默认为 ./dist
3.3创建与下图对应的目录(注意文件夹路径)
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出现类似下图,表示成功;
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出现下图,教程结束: