webpack简单使用(1)

今天想了解一下webpack，但找了网上的一系列教程，都会或多或少出现一些不明报错，实在恼火，经过几番简化，终于用最简单的方法使用了webpack，在此记录一下

一.环境配置

1.首先，安装Node.js，这里不赘述，未接触nmp的童鞋可以参考Node.js安装配置

2.在cmd中输入

npm install webpack -g

3.在自己测试的位置创建一个新的文件夹，命名webpack_demo

4.进入刚刚所创建的文件夹webpack_demo，按住shift键同时点击鼠标右键(即打开cmd并进入webpack_demo文件夹)

5.在打开的命令窗口键入：npm init，根据提示填写信息，name表示项目名，version表示版本等等，不一一赘述了，也可使用默认值，一路回车即可，最后出现“is this ok?”时，敲击回车键，webpack_demo文件夹便生成了package.json文件夹

二.构建webpack项目

1.在webpack_demo文件夹下创建webpack.config.js文件，此文件为webpack的配置文件。具体内容如下：

//webpack.config.js
module.exports={
	entry:'./src/js/entry.js', //页面入口文件
	//输出文件
	output:{
		filename:'index.js',	//输出文件名
		path:__dirname+'/out',	//输出文件路径
	}
}

参数简单说明：

entry：是页面入口文件配置（html文件引入唯一的js 文件）
output：对应输出项配置
- path ：入口文件最终要输出到哪里，
- filename：输出文件的名称
- publicPath：公共资源路径

2.接着，我们在创建一些基本的文件保存路径，我们这里创建网页中最基本的一些文件夹

3.接下来我们在index.html，和entry.js中填充点内容

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
<div>hello world</div>
<script type="text/javascript" src="./out/index.js"></script>
</body>
</html>

// entry.js
document.write('呵呵到天亮');

4.完成以上操作，我们可以来试试效果了，在刚才所打开的cmd窗口中输入webpack （假如已经关闭，按上面第4步操作即可）

下面WARNING in configuration原因及解决办法可点击链接：https://blog.csdn.net/lgx1134569285/article/details/87986317

5.看到上面的一幕，恭喜你，已经成功了，我们再进一步验证一下，

目录下多了一个out文件夹，out文件生成了我们所命名的index.js

打开内容如下

打开index.html文件，结果不仅打印出html文件中的"hello world"，js中的打印123也生效了

(ps：这里打印中文时假如出现乱码，记得在html文件的<head>标签添加编码<meta charset="utf-8">)

呵呵到天亮

发布了22 篇原创文章 · 获赞 124 · 访问量 13万+

私信关注

一.环境配置

二.构建webpack项目

猜你喜欢