首先建立基本项目结构
在上一篇博客写到项目目录安装前有个初始化,npm init,生成后npm终端会显示一长串的问答,其中就有项目名,依据自己填写的项目名,打开开发者工具,在文件夹下建立dis文件夹和src文件夹。
- dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。
src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。
我对于dist文件是,打包后生成的文件夹,src是源码文件夹。一个是用于生产环境,一个是用于开发环境。
编写程序文件
/dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpackDemo</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
这里的 bundle.js文件是用webpack执行打包命令后生产的文件到dist里的。
src/entery.js–>入口文件
document.getElementById('title').innerHTML='Hello Webpack';
这段代码意思就是在id=‘title’的标签里加上‘Hello Webpack’。
第一次webpack打包
在npm终端打包的基本使用方法:
webpack {entry file} {destination for bundled file}
- {entery file}:入口文件的路径,本文中就是src/entery.js的路径;
- {destination for bundled file}:填写打包后存放的路径。
注意:这里为了更好的看出文件名我加了{},在命令中是不需要{}的
我写的案例中,命令如下
webpack src/entry.js dist/bundle.js
查看结果
这里我用的live-server来看效果,若是你没有安装过,可以通过下面命令来进行全局安装:
npm install -g live-server
安装好之后命令live-server回车,就会自动打开浏览器,之后就会看到打包后的一个效果。
小知识点
若你觉得你的webpack版本过低,你可以把node_modules文件夹删除,通过npm install再重新安装新的node_modules文件夹,再通过下面命令重新安装webpack:
npm install --save-dev webpack