前言
WebPack 是一个新型的纯 WEB 前端打包器,可以作为一个其他框架的一个资源聚合器。
以往有 RequireJS,但是随着时光的推移以及 MVVM 框架的普及,我骤然发现这个 WebPack 非常非常流行。
WebPack 文档:http://webpack.github.io/docs/
但是,官方文档并不是那么好读,我原本只是希望用来做 vuejs 的 SPA 项目。
在 stackoverflow http://stackoverflow.com/a/34802997/2544762 里面问了一个问题,然后里面推荐了一篇关于 WebPack 的入门文章:
https://web-design-weekly.com/2014/09/24/diving-webpack/
下面我们就来通过这篇教程来学习一下 WebPack。
什么是 WebPack?
webpack 是一个模块打包器
webpack 根据依赖关系获取模块,然后生成一些代表这些模块的静态资源。
由于网站正一步一步演变成 web 应用,它们越来越依赖 javascript。这导致客户端的代码越来越庞大。总体来讲,使用一个模块系统不仅仅会提升开发,也能够提升用户体验。
如果你正好在搞些大的工程,或者仅仅是研究这个领域的东西,你无疑会理解到将代码组织好的重要性。一个最好的办法来管理 javascript 的代码组织,就是将你的代码划分成模块。
当问题规约到模块系统,这里有一些比较著名的可能你已经用过或者听过,例如 Browserify 或者 RequireJS 这两者都是非常有用,实现了非常伟大的工作,但是 webpack 为你做到了更多,让我们来发掘一下吧!
为什么用 webpack?
使用 webpack 你可以轻易将你的应用切分成多个文件。
你的代码可以拆分到多个块,这些块也可以按需载入,以节省你的应用的首次加载时间。它们也可以让你的缓存通过 hash 恰当地缓存。这些东西一下子好像很难想象,但是它就是会帮你搞定!
webpack 可以构建和打包 css,预处理 css,编译 js(例如 coffeescript),图像和更多的 东西可以通过 webpack 加载器 实现。这些类似 gulp 和 grunt 但是已经被
另一个的优秀的特性是 webpack 插件。webpack 插件可以将他们自己注入到构建过程中,来实现各种各样疯狂的东西。
webpack 的特性已经很足够了,我们来看看怎么用!
开始使用 Webpack!
先通过 npm 安装 webpack
注意:你可能需要
sudo
权限来执行下面的某些命令
npm install webpack -g
在你项目的根目录添加一个 package.json
文件,通过 npm init
可以创建,或者直接将下面的内容保存到 package.json
:
{
"name": "WebpackDemo",
"author": "Web Design Weekly",
"version": "0.0.1",
"description": "The start of good things!",
"private": true,
"scripts": {},
"dependencies": {},
"devDependencies": {}
}
现在我们将 webpack 加到刚才创建的 package.json
中。
npm install webpack --save-dev
现在 webpack
命令已经可以通过命令行调用了。你可以在官网上找到详细的选项,或者通过 webpack -h
查看。
有些常用的配置选项需要记住
webpack
– 用于开发环境的一次性构建
webpack -p
– 用于生产环境的一次性构建(会使用压缩)
webpack --watch
– 用于持续增量构建
webpack -d
– 包括源代码映射(map文件)
webpack --colors
– 让构建的内容好看一些
我们要做的下一件事是在项目根目录创建一个 webpack.config.js
,以确保内容组织良好。
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
}
创建一个简单的 JavaScript 文件 main.js
,包含下面的内容:
document.write('Webpack for the win!');
现在你在命令行里面执行 webpack
命令,你就会得到一个“webpack化”的 bundle.js
文件!刚才发生的事情就是 webpack
命令找到你的 webpack.config.js
文件然后魔法般地实现了这个结果。
为了确认所有东西都能够工作,我们可以创建一个具有如下内容的 index.html
文件:
<html>
<head>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<h1>Webpack Demo</h1>
</body>
</html>
将多个模块合成一个
前面的例子太杂碎了,但是相信我,马上你就可以看到,Webpack 具备超级牛力。我们稍为过度一下,然后就会试着将多个模块添加到你的最终脚本中去。
首先创建一个 second.js
,包含下面的内容:
module.exports = document.write('Oh yeah another file.');
然后在 main.js
给它一个引用:
require('./second.js');
再度于命令行运行 webpack
命令,创建你的 bundle.js
。你现在可以看到两个文件很好地合在了一起。
搞定之后你可以试试 webpack -p
。现在你的 bundle.js
已经最小化了。
在混合中加入一个加载器
我们已经简短介绍过 webpack 加载器了,是时候配置一个了!
如果你想知道得清楚一些,这里在 webpack 的网站有一个加载器的列表。在这个案例中,我们准备要创建一个CoffeeScript 加载器
将 loader 加到你的 package.json
中:
npm install coffee-loader --save-dev
还要将这个新的块加入 webpack.config.js
module: {
loaders: [
{ test: /\.coffee$/, loader: "coffee-loader" }
]
}
为了测试加载器我们需要添加一个简单的 CoffeeScript 文件。让我们来创建一个 third.coffee
并且加入如下内容:
alert "webpack is boss!"
在 main.js
中引入它:
require('./third.coffee');
执行 webpack
命令,你现在可以在网页中看到一个 alert 警告框。
译注:注意在执行
webpack
的时候可能会报错,那可能是因为基础的 coffee-script 库并没有装上,通过sudo npm install coffee-script -g
可以解决问题。
再声明一下,这仅仅是做一些很肤浅的动作来表明加载器的功能,但是希望这可以让你理解如何将它们配置起来。
加入 css 和图片
首先我们需要再在 package.json
中安装几个加载器:
sudo npm install style-loader css-loader url-loader --save-dev
在 webpack.config.js
中添加这些新的模块:
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
注意:这些在
url-loader
的参数会将 8kb 以下的图片换成行内图片(使用 base64 字符串表示)
通过这些新的加载器,我们还需要对 webpack 做一点调整来实现它的魔法。
在 webpack.config.js
里面,调整一下输出的参数像下面这样:
output: {
path: './build', // 这是图片和 js 存放的位置
publicPath: 'http://yoururl.com', // 这用于创建 url
filename: 'bundle.js'
}
我们在这里添加了 path
和 publicPath
。
注意:如果你已经实践,你会发现你还需要修改你 HTML 里面的
bundle.js
位置,它现在在build
目录下面。
为了测试新的加载器能够正确工作,让我们添加一个 CoffeeScript 文件 image.coffee
,然后将其在 main.js
里面引入:require('./image/coffee');
。
在 image.coffee
里面添加两个图片的引入(一个小于 8kb 以观测行内 base64 url 的构建)
img1 = document.createElement('img')
img1.src = require('./your-small-image.png')
document.body.appendChild img1
img2 = document.createElement('img')
img2.src = require('./your-big-image.png')
document.body.appendChild img2
同样地,我们创建一个新的 CSS 文件 style.css
,包含这些内容:
body {
background: tomato;
}
然后我们在 main.js
里面将其引入:require('./styles.css')
然后再运行一下 webpack
,DUANG…
欢迎使用 Webpack
将所有东西包在一起
上面是一个 webpack 的一个基础介绍。希望你已经得到一个总体的理解然后可以将你的项目“Webpack化”。非常感谢Pete Hunt令人惊叹的教程帮助了我写这篇文章。
如果你还有不明白的话,可以在 github 上下载这些例子完整的源代码。
享受 webpack 吧!
其他参考资源
http://jiongks.name/blog/just-vue/
【转载请附】愿以此功德,回向 >>
原文链接:http://www.huangwenchao.com.cn/2016/04/webpack-intro.html【WebPack 入门(最简单的例子)】