专栏首页前端修炼之路【第7期】 webpack入门学习手记(一)

【第7期】 webpack入门学习手记(一)

之前用过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.filenameoutput.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属性,这个属性又有两个属性:testuse。这就好像告诉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内置的优化。你可以指定developmentproductionnone,分别对应着不同的环境。默认的是production。例如:

webpack.config.js

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

Browser Compatibility

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


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

(未完)

本文分享自微信公众号 - 前端修炼之路(siberiawolf0307),作者:siberiawolf

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【第8期】webpack入门学习手记(二)

    最近开始想要维护一个个人的公众号,初心是为了督促自己坚持做笔记,将学习的东西整理记录下来。更进一步的要求是提升动手能力、文章写作能力,和分享经验。终极目标就是为...

    siberiawolf
  • 【第9期】webpack入门学习手记(三)

    距离上一次更新这个系列,过去了两天。最近实在是有点忙,没有挤出时间整理。感觉日更还真是困难?

    siberiawolf
  • 【第10期】webpack入门学习手记(四)

    在程序入口文件中,引用这个文件。这个文件的内容,对上一节的代码做了修改。只保留了加载css样式的代码。

    siberiawolf
  • 【第13期】webpack入门学习手记(五)

    前几天朋友聚餐突然想到,再过不到半年时间,第一批20后即将出生。这种感觉就像是,现在的90后看60后~ 一不小心我们这些90后在20后的眼中就变成了上个世纪的人...

    siberiawolf
  • 最全前端资源汇总

    一、概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方...

    张果
  • 双非同学,自学编程,毕业一年逆袭百度!

    大家好,我是鱼皮,最近秋招快到了,我就想着给大家找一些优秀的程序员面经分享。希望可以帮助准备求职的同学更稳地上岸,同时帮助学编程的小伙伴们更好地明确学习路线和方...

    程序员鱼皮
  • 前端文章收藏

    前端GoGoGo
  • 机器学习入门 7-7 试手MNIST数据集

    MNIST数据集是由美国高中生和人口普查局员工手写的70000个数字的图像,其中60000张训练图像,10000张测试图像。它是机器学习领域的一个经典数据集,其...

    触摸壹缕阳光
  • 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)

    https://juejin.im/post/5e85ec79e51d4547153d073820ed

    闰土大叔
  • 辛辛苦苦学会的 webpack dll 配置,可能已经过时了

    如果大家看过一些 webpack 优化的文章,一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。

    卤代烃
  • Python学习手册--第一部分(使用入门)

    目前有众多可选的编程语言,这往往是入门者首先面对的问题,所以,为什么我们要选择Python,而不是其它的编程语言,是有着它的理由的。 Python在软件质量、...

    wangweijun
  • 金九银十:一年前端的面试分享

    以上是五点非常致命的,毫不客气的说,我可能连简历都过不了HR初筛,当然也没有告诉家人自己的境况,不过竟然自己做出的决定,那么就不要懊恼自己的做法,一股脑准备复习...

    落落落洛克
  • 一年前端的面试分享

    以上是五点非常致命的,毫不客气的说,我可能连简历都过不了HR初筛,当然也没有告诉家人自己的境况,不过竟然自己做出的决定,那么就不要懊恼自己的做法,一股脑准备复习...

    前端迷
  • 微服务[学成在线] day02:CMS前端开发

    由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重...

    LCyee
  • 性能优化三部曲之一——构建篇

    背景: 接手新项目,发现项目最基本的文件压缩没有,离线包有多余文件,md5也并没有做好, 构建是用coffeescript写的,维护成本及交接成本大,关键的是,...

    李成熙heyli
  • Github开源免费编程书籍

    时见疏星
  • 一位00后前端2年经验的成长历程

    没错,我就是一位00后前端。2001年出生的我,从18年5月份到现在一直在开源中国任职。目前在Gitee私有化部门担任前端开发一职,负责规范制定,技术攻关,人员...

    若川
  • Webpack 实战入门系列(三):生产配置、样式文件分离及输出清理

    现在vue、react很流行,新项目基本用这些新框架,组件化开发确实是趋势,但是他们再怎么发展也离不开构建工具,顶多在webpack等工具上进行再封装。现在vu...

    一只图雀
  • 史上最全的前端资源大汇总

    Tanyboye

扫码关注云+社区

领取腾讯云代金券