webpack入门学习手记（一）

mengera88 发布于2019-08-23 14:01 / 1735人阅读

摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四

本人微信公众号：前端修炼之路，欢迎关注。

之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下webpack。webpack要想深入研究，配置的东西比较多，网上的资源也有很多。我这里学习的主要途径是webpack官方给出的指南，和webpack中文网的翻译版本。因为我觉得第一手资料肯定是官网给出的更权威一些。

我学习的过程是，先看一遍中文网的文章，对每一节的内容有个大致印象和理解；然后再看一遍英文的官方文档，按照官方文档给出的示例配置文件照着做一遍。如果哪里英文理解有问题，再照着中文的文档反复思考一下。所以我的这篇文章，也有类似翻译英文官方文档。因为我就说照着文档操作，然后再把这个过程按照自己的理解重新整理成文章。

之所以这么做的原因是，一方面要提高自己的英文文档阅读和理解能力，另一方面是中文的文档一般都会更新得比较滞后和有不少错误，不能光按照中文手册去做。最后就是肯定要动手自己操作一遍的，理解起来是一回事儿，操作起来就是另外一回事儿了。

在这个过程中，主要有一下几点心得：

后悔没有早点学webpack，功能太强大了。

webpack功能和概念真多，感觉一下子学不完，只能用啥学啥。先整理出主要内容，细节一点点学习、补充。

通过一段时间的锻炼，阅读英文文档能力有所提高，需要继续努力。争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。

以下是正文~

概念

在开始之前，必须要知道webpack涉及的概念。目前我学习webpack是最新的版本是v4.27.1，另外官网明确指出，从webpack 4 以上开始，就不在需要必须制定配置文件，但是仍然具备可扩展性。

为了学习webpack，需要理解的核心概念：

Entry：入口

Output：输出

Loaders：loader

Plugins：插件

Mode：模式

Browser Compatibility：浏览器兼容

Entry

entry说简单点，就是没有打包之前的原文件。可以指定一个文件、可以指定多个文件或者不同目录下的文件。如果不指定，默认值为：./src/index.js。在配置文件中指定其他文件时，例如：

module.exports = {
  entry: "./path/to/my/entry/file.js"
};

Output

output属性告诉webpack在哪里输出打包好的文件，以及如何命名这个文件。默认情况下是./dist/main.js，作为主要的输出文件，./dist目录就是输出的目录。

可以在配置文件中修改output属性来修改输出文件和目录，例如：

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js"
  }
};

上面例子中，使用output.filename和output.path属性，告诉webpack打包文件的名字和打包文件的目录。其中的path模块是，Node.js模块。

Loaders

webpack只能识别JavaScript和JSON文件，Loaders允许webpack处理其他类型的文件。在webpack配置文件中，需要指定一下两个属性

test：test属性告诉webpack哪些文件需要被转换。

use：use属性告诉webpack相应的文件使用哪个loader进行转换。

例如：

webpack.config.js

const path = require("path");

module.exports = {
  output: {
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  }
};

上面的配置中定义了一个module.rules属性，这个属性又有两个属性：test和use。这就好像告诉webpack编译器说：

”Hi，webpack编译器，当你发现任何后缀为.txt的文件时，请使用raw-loader先转换一下，然后再把转换后的内容添加到打包文件中。“

Plugins

Loaders是用来转换某些类型的模块，而插件可以做更广泛的工作，例如压缩、优化程序，甚至改变环境变量。

想使用一个插件，只需要通过require()这个插件，然后在plugins数组中添加这个插件。大多数的插件，都是支持修改配置的。例如：

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
const webpack = require("webpack"); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
};

在上面的例子中，使用html-webpack-plugin生成一个HTML文件，这个文件就是你的应用程序。在其中已经自动引用好了打包的文件。

Mode

通过设置mode属性，可以启动webpack内置的优化。你可以指定development、production、none，分别对应着不同的环境。默认的是production。例如：

webpack.config.js

module.exports = {
  mode: "production"
};

Browser Compatibility

webpack 支持所有基于ES5的浏览器，但是IE8及以下是不支持的。因为webpack需要import()和require()。如果需要支持老版本浏览器，可以使用loader解决。

以上就是webpack的核心概念。下一篇笔记整理webpack官方文档的指南手册，敬请关注。

（待续）

相关文章

webpack入门学习手记（一）

webpack入门学习手记（二）

webpack入门学习手记（三）

webpack入门学习手记（四）

私有云 idc机房托管 webpack入门手记 Webrtc手记编程学习入门学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99960.html

webpack入门学习手记（五）

摘要：另外需要指定这个参数，表示在配置的数值以下的图片才进行编码，超过的不进行处理。代码如下所以过程就是引入了，然后进行打包处理，生成和。目前这个入门学习手记到这里就结束了。完相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

AlphaWatch 2019-08-26 10:13 评论0 收藏0
webpack入门学习手记（二）

摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。最近开始想要维护一个个人的公众...

Joyven 2019-08-23 14:05 评论0 收藏0
webpack入门学习手记（四）

摘要：本人微信公众号前端修炼之路，欢迎关注。再过一天，就是年了，在这里祝大家新年快乐，阖家欢乐，万事大吉。 showImg(https://image-static.segmentfault.com/230/457/2304574665-5c1373e5a1763_articlex); 本人微信公众号：前端修炼之路，欢迎关注。再过一天，就是2019年了，在这里祝大家新年快乐，阖家欢乐，万事...

ygyooo 2019-08-23 14:24 评论0 收藏0
webpack入门学习手记（三）

摘要：本人微信公众号前端修炼之路，欢迎关注。距离上一次更新这个系列，过去了两天。最近实在是有点忙，没有挤出时间整理。感觉日更还真是困难 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。距离上一次更新这个系列，过去了两天。最近实在是有点忙，没有挤出时间整理。感觉日更还真是困难

rozbo 2019-08-23 14:09 评论0 收藏0
Python爬虫建站入门手记——从零开始建立采集站点（一：环境搭建）

摘要：从今天起，我将在这里更新一个系列的简单爬虫到建立网站的实践手记。内容将会从最简单的开始，环境搭建，基本爬虫，入库，用建立可供用户访问的网站，网站部署。第一部分，买，装环境。我们爬虫站点的所有文件都放在里面。从今天起，我将在这里更新一个系列的python简单爬虫到建立网站的实践手记。内容将会从最简单的开始，环境搭建，基本爬虫，入库，用Django建立可供用户访问的网站，网站部署。 ...

HackerShell 2019-07-24 17:56 评论0 收藏0