使用webpack打包你的web

原文链接: https://blog.madewithlove.be/post/webpack-your-bags/

这里写图片描述

打包你的web

目前为止你可能已经听说过这款名为webpack的新工具。如果你还不是很了解它,你可能会有一些困惑。因为有人说它是Gulp另外有人说它像Browserify。另一方面,如果你研究过它你可能仍然会困会,因为这个主页都使用了上面的两种方式。
实际来讲,最初围绕着”什么是webpack”令我十分困惑,所以我不在继续了解。直到后来,我已经构建了一个系统,然后很开心的改善它。同时,如果你跟快速构建javascript场景紧密相关,像我一样,你可能很快就会重受打击。当拥有一些经验后,我意识到我应该写下这篇文章,客观中立的解释下什么是webpack,更重要的是,它很棒值得有更多的关注。

什么是webpack

通过简介来立刻回答这个问题: Webpack是构建系统还是打包模块?其实两者都有。我的意思是它合并了两者而不是它两者都做。Webpack并不构建你的资源,同时它分别构建模块,可以认为资源就是模块自身。
相比构建所有的Sass文件,优化你的图片,同时在一边引入它们,然后模块,在引入到你的页面或者其他地方,webpack这样做意味着更加精确。比如下面的代码:

import stylesheet from 'styles/my-styles.scss';
import logo from 'img/my-logo.svg';
import someTemplate from 'html/some-template.html';

console.log(stylesheet); // "body{font-size:12px}"
console.log(logo); // "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5[...]"
console.log(someTemplate) // "<html><body><h1>Hello</h1></body></html>"

你所有的资源本身就是模块,可以被引入,修改,操作最终被打包到你的包中。
为了有效,你需要在webpack 配置文件中注册你的 loaders 。 Loaders 是一个小插件,只会做“当你遇到这种类型的文件只,做什么什么”这样的。比如下面的loaders案例:

{
  // When you import a .ts file, parse it with Typescript
  // 当你引入.ts文件时,使用Typescript 来解析
  test: /\.ts/,
  loader: 'typescript',
},
{
  // When you encounter images, compress them with image-webpack (wrapper around imagemin)
  // 当你遇到图片是,使用images-webpack来压缩
  // and then inline them as data64 URLs
  // 同时使用64位URL存储
  test: /\.(png|jpg|svg)/,
  loaders: ['url', 'image-webpack'],
},
{
  // When you encounter SCSS files, parse them with node-sass, then pass autoprefixer on them
  // 当你遇到scss文件,使用node-sass解析,然后自动补全前缀
  // then return the results as a string of CSS
  // 然后返回结果为css
  test: /\.scss/,
  loaders: ['css', 'autoprefixer', 'sass'],
}

最终在食物链的终端所有的loaders都会返回字符串。这就可以让Webpack把它们都打包在javascript 模块里。你的每一个sass文件会被loaders转化,它们最终看起来像是这样:

export default 'body{font-size:12px}

这里写图片描述

究竟为什么要这么做?

一旦你理解了Webpack在做什么,那么很可能就会有第二个问题:它究竟可以带来什么好处? “图片和CSS?我的JS?到底是什么?这样来考虑,很长时间内,我们习惯于把所有的东西放进单个的文件中,保存在我们的HTTP请求中,巴拉巴拉。
这样做导致一个不好的方面,即现今大多数人打爆所有的资源到一个app.js文件,这个文件包含了所有的页面。这样也意味着大多数时间你需要加载大量的不需要的资源。如果你不这么做,你可能需要在具体的页面手动引入资源而不处理其他的,这样会导致很多杂乱的依赖树去需要维护和追踪,哪个页面的依赖已经加载了?哪个页面用样式A或B的效果。
上面两种方法都对,或者都错。Webpack是个中间件,它不止构建系统或者打包,它是个淘气聪明的打包模型系统。一旦配置合适,它比你做的更了解很多,而且知道如何最好的优化它们。

构建一个轻量APP

为了更容易理解Webpack的好处,我们要构建一个轻量的app然后打包资源。在这个教程里我推荐使用Node 4(或者5),NPM 3。当使用Webpack工作时,作为依赖平台它们可以避免很多问题。如果你没有NPM 3,可以直接通过 npm install npm@3 -g安装它们。

$ node --version
v5.7.1
$ npm --version
3.6.0

建议添加 node_modules/.bin 到你的系统路径里,避免每次输入 node-Modules/.bin/webpack。之后在我运行的命令里都不会出现node_modules/.bin

基本引导

开始创建一个项目同时安装Webpack,之后我们也要用jQuery来演示一些东西。

npm init -y
npm install jquery --save
npm install webpack --save-dev

现在我们创建入口文件,使用ES5。

src/index.js

var $ = require('jquery');
$('body').html('hello');

来编写一个Webpack配置,配置写在webpack.config.js文件中。它是javascript同时需要导出一个对象。

webpack.config.js

module.exports = {
    entry: './src',
    output: {
        path: 'builds',
        filename: 'bundle.js'
    }
}

这里面entry指明Webpack在你的应用里以哪个文件为进入点。这些是你的主要文件,在你依赖树的顶部。然后,我们编译打包在builds目录下的bundle.js文件下。接下来设置相关的HTML:

<!DOCTYPE html>
<html>
<body>
    <h1>My title</h1>
    <a>Click me</a>

    <script src="builds/bundle.js"></script>
</body>
</html>

运行Webpack,如果一切正常我们会看到一条编译bundle.js完成的信息。

$ webpack
Hash: d41fc61f5b9d72c13744
Version: webpack 1.12.14
Time: 301ms
    Asset    Size  Chunks             Chunk Names
bundle.js  268 kB       0  [emitted]  main
   [0] ./src/index.js 53 bytes {0} [built]
    + 1 hidden modules

webpack提示bundle.js包含了入口文件(index.js)和一个隐藏模块。它是jQuery,Webpack默认会隐藏不属于你的模块。要查看所有的编译模块,我们需要通过--display-modules来标识。

$ webpack --display-modules
bundle.js  268 kB       0  [emitted]  main
   [0] ./src/index.js 53 bytes {0} [built]
   [1] ./~/jquery/dist/jquery.js 259 kB {0} [built]

你也可以运行webpack --watch来自动观察文件的改变然后按需要重新编译它们。

设置第一个加载器

记得之前我们讨论多Webpack可以导入CSS和HTML以及任何东西吗?在哪里做这些事呢?如果过去几年你调整过大型Web组建(Angular 2,Vue, React, Polymer, X-Tag,等等)。你可能听过一种观点,用可扩展复用自包含的UI组件(我简要说明,你应该能理解)来替代相互连接的整体UI。现在为了组件能真正的自我包含,它们需要打包所有的需要。想象一个按钮组件:它肯定包含一些HTML代码,也有一些js用来做一些交互,当然也要有一些合适的样式。如果当只有被需要的时候所有的东西才会加载那一定是很好的。对吗?只要我们导入这个Button按钮,我们会得到所有相关的资源。

来写第一个Button,一开始,我假设你习惯使用ES2015,我们要添加第一个加载器:Babel。在Webpack里面安装加载器需要做两件事:npm install {whatever}-loader,同时在Webpack配置中添加module.loader部分。接下来一起做,下面是我们需要的babel,像这样:

$ npm install babel-loader --save-dev

我们也需要安装Babel自身当特殊情况下加载器不会安装时。我们需要babel-core软件包和es2015预设置。

$ npm install babel-core babel-preset-es2015 --save-dev

我们创建一个.babelrc文件来告诉Babel使用的预置。这是一个简单的JSON文件,允许你去配置当转换器Babel运行你的代码时,在我们的例子中我们使用es2015预置。

.babelrc{"presets":["es2015"]}

现在Babel设置好了,我们可以更新配置:我们需要什么?我们需要Babel运行以.js结尾的文件,但是当Webpack贯穿所有依赖,我们需要避免Babel运行在第三方代码上比如jQuery,所以我们需要过滤一些。加载器可以有包括或者不包括的规则。它可以是字符串,正则,回掉函数或者任何你要的。在我们的例子中,我们希望Babel只运行我们的文件,所以我们需要include我们目录中的源代码。

module.exports = {
    entry:  './src',
    output: {
        path:     'builds',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {
                test:   /\.js/,
                loader: 'babel',
                include: __dirname + '/src',
            }
        ],
    }
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值