过去数年间，web开发已经从包含少量JavaScript代码的应用发展到到拥有复杂JavaScript代码和代码之间依赖关系树的应用。Webpack能分析项目的结构，找到JavsScript模块和其他Assets，然后收集打包给浏览器使用。来看一个简单的Webpack使用例子。
1、工具安装和环境配置
首先要安装npm，直接安装Node.js就可以了。然后使用npm install -g webpack全局安装，或者在对应的工程目录下本地安装。接下来我们创建一个工程目录，比如sample1。然后创建两个目录app和public。app目录下创建两个文件Greeter.js和main.js，public目录下放置一个index.html文件。然后执行npm init命令，创建package.json文件。如果没有全局安装webpack，还要使用npm install webpack命令，目录下会多出一个node_modules目录。
2、代码实现
Greeter.js和main.js代码实现如下：
//main.js
var greeter = require(‘./Greeter.js‘);
document.getElementById(‘root‘).appendChild(greeter());
//Greeter.js
module.exports = function() {
var greet = document.createElement(‘div‘);
greet.textContent = "Hi there and greetings!";
return greet;
};
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>
注意到我们使用了bundle.js这个文件，我们将在第三步中使用webpack生成这个文件。
3、使用Webpack打包
接下来我们使用webpack app/main.js public/bundle.js生成bundle.js文件。我们只需要告诉webpack主文件是main.js，webpack就会找到所有使用的依赖文件，将所有文件一起打包处理。
然后用浏览器打开index.html文件，就可以看到Hi there and greetings!语句了。
时间： 2024-07-29 14:50:07