使用webpack打包你的web

最新推荐文章于 2024-07-23 16:39:39 发布

Todd_Mark

最新推荐文章于 2024-07-23 16:39:39 发布

阅读量709

点赞数

分类专栏： javascript

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原文链接： 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',
            }
        ],
    }
};