Webpack之恋(2)-实战入门教程

楔子

Webpack功能之强大,一言难尽。鉴于你了解了核心概念,本文就用一个小实例先带你一睹它的风采,虽然只是冰山一角,但会让大饱眼福的。
webpack

安装

欲用之则善待之,webpack是基于nodeJs的,因此首先安装nodeJs环境,这里不再啰嗦如何安装。安装nodeJs后就拥有了npm管理工具。
本地(local)安装最新或指定版本

npm install webpack --save-dev
npm install webpack@<version> --save-dev

这样会在当前目录里会生成node_modules,webpack就在其内,因此如果你想使用webpack,你需这样

./node_modules/.bin/webpack --help # unix/linux
.\node_modules\.bin\webpack --help # windows

你也可以全局安装

npm install webpack -g

这样你就可以直接使用

webpack --help

如果你用的是npm script,你还可以这样

"scripts": {
"start": "webpack --config mywebpack.config.js"
}

以上是关于npm的范畴,不再展开,你可以查看npm即可。

构建

项目结构

现在我们来编译第一个项目,对webpack做个感性的认识。目录结构如下

.
├── app
│   └── index.html
└── src
└── index.js

// src/index.js
import _ from 'lodash';

function component () {
var element = document.createElement('div');

//使用了lodash库https://lodash.com/
element.innerHTML = _.join(['Hello','world'], ' , ');

return element;
}

document.body.appendChild(component());
<!--app/index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Getting Started</title>
</head>
<body>
</body>
<script src="assets/js/index.js"></script>
</html>
准备工作

由于index.js使用了lodash库,因此需要使用npm安装lodash,在项目根目录下执行

npm install lodash

执行的目录结构

.
├── app
│   └── index.html
├── node_modules
│   └── lodash
└── src
└── index.js

可见lodash已经安装成功了,存放在node_modules中。

命令行构建

从index.html中可以看到应用的index.js位置,因此需要使用webpack把src/index.js作为entry,产出物的目标是app/assets/js/index.js,执行

webpack src/index.js app/assets/js/index.js

此时app的结构如下

app/
├── assets
│   └── js
│   └── index.js
└── index.html

用firefox或chrome预览index.html就可以看到效果了。

配置文件构建

当然你也可以使用配置文件,webpack默认识别的配置文件名为webpack.config.js

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'app/assets/js'),
filename: 'index.js'
}
};

然后执行webpack就可以执行构建了。

总结

各种构建工具的盛行,比如Java的maven,gradle,nodeJs的npm,php的composer等,都是为了提高开发效率,而web前端构建集大成者莫过于webpack。希望这篇以及上一篇的概念让你已经窥入门径了。

翟前锋 wechat
欢迎订阅我的微信公众号:zhaiqianfeng!