WebPack 入门(最简单的例子)

前言

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'
}

我们在这里添加了 pathpublicPath

注意:如果你已经实践,你会发现你还需要修改你 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/


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2016/04/webpack-intro.html【WebPack 入门(最简单的例子)】

发表评论

电子邮件地址不会被公开。 必填项已用*标注