1.使用Webpack前需要做的准备
在新项目文件夹中新创建package.json,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务。(在终端可以使用npm init可以自动创建package.json)文件。
输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。
对应生成的package.json文件
{
"name": "pack",
"version": "1.0.0",
"description": "",
"main": "app/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "gx",
"license": "ISC"
}
2.安装webpack
(1)在本项目中安装webpack作为依赖包。
npm install --save-dev webpack
(2)全局安装
npm install -g webpack
这里我选用的是在项目中安装即第一种方法。
回到项目根目录创建两个文件夹,app和public,app文件夹用来存放原始数据和我们将写的javaScript模块,public文件夹用来存放之后供浏览器读取的文件,
(包括使用webpack打包生成的js文件以及一个index.html
文件)。接下来我们再创建三个文件:
index.html
--放在public文件夹中;
Greeter.js
-- 放在app文件夹中;
main.js
-- 放在app文件夹中;
项目结构如图所示:
index.html中文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
我们在Greeter.js
中定义一个返回包含问候信息的html
元素的函数,并依据CommonJS规范导出这个函数为一个模块:
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
main.js
文件中我们写入下述代码,用以把Greeter模块
返回的节点插入页面。
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
使用webpack命令打包,基本使用方法如下:
webpack {entry file} {destination for bundled file}
指定入口文件后,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack不是全局安装的,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址,继续上面的例子,在终端中输入如下命令
node_modules\.bin\webpack app\main.js --output public\bundle.js
命令用的不对,应该加上--output表明public\bundle.js
是输出文件。
打开index.html页面我们可以看到,在Greeter.js中输入的内容Hi there and greetings!
此时我们已经成功的使用Webpack
打包了一个文件了。