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

之前用过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官方文档的指南手册,敬请关注。

(未完)

原文地址:

webpack入门学习手记(一)的更多相关文章

  1. webpack入门学习

    一.认识webpack webpack是一款模块打包加载工具.它能够将各种资源.JS.CSS.图片等作为模块打包加载.本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指 ...

  2. Webpack 入门学习

    1.什么是Webpack? Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...

  3. webpack入门学习总结

    <h5概述</h5> webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分 ...

  4. webpack入门-个人学习资源收集

    本来是想自己写哈个人学习webpack心德的,不过网上现在已经有各种比较好的,详细的入门或者深入资源了. 所以我就简单总结了一下,我在入门webpack时看的一些博客和文档,以及顺道看到的一些觉得也应 ...

  5. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  6. EF框架学习手记

    转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...

  7. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  8. webpack初步学习

    https://segmentfault.com/a/1190000006178770 该篇文章足够webpack入门的学习了,对webpack有个初步的了解和认识.

  9. webpack—入门

    点击进入webpack官网.,开始教程时,建议先学习ES6语法,也请先观看本篇Windows符号介绍文章,当所有webpack内容学习完后,会有一个专门的介绍 webpack四个核心概念(从官网入门— ...

随机推荐

  1. 彩色图像--色彩空间 CMY(K)空间

    学习DIP第63天 转载请标明本文出处:***http://blog.csdn.net/tonyshengtan ***,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管,欢迎共同开发:http ...

  2. java从ldap中导出数据到ldif文件中

    原创:http://www.cnblogs.com/dqcer/p/7814034.html 导入ldap.jar包,笔者已对下面两个文件测试并通过.若有疑问欢迎留言 LDAPExport.java ...

  3. 用JavaScript实现div的鼠标拖拽效果

    实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...

  4. 关于int,bool,str

    今日主要内容 基本数据类型(int,bool,str) 1.基本数据数据类型: int 整数 str 字符串. 一般不存放大量的数据 bool 布尔值. 用来判断. True, False list ...

  5. 获取select的option值

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. TCP 之 TCP首部

    TCP首部图 TCP首部说明 源端口,目的端口 用于寻找发送端和接收端应用进程.(源IP,源端口,目的IP,目的端口) 四元组确定唯一一个TCP连接:(IP,端口)也称为一个插口(socket): 序 ...

  7. echart 饼图图例legend支持滑动

    ps: 以下针对option操作 文章目录 图例过多加上滚动条图例形状图例自定义显示图例过多加上滚动条 legend:{ top:'50', bottom:'50', type:'scroll',} ...

  8. UVa679 小球下落(树)

    UVa679 小球下落(树) 题目大意 小球从一棵所有叶子深度相同的二叉树的顶点开始向下落,树开始所有节点都为0.若小球落到节点为0的则往左落,否则向右落.并且小球会改变它经过的节点,0变1,1变0. ...

  9. Firefox63以后 禁止自动更新方式

    参考:https://bbs.kafan.cn/thread-2135160-1-1.html 63版以后在prefs.js文件末尾加代码来禁止自动更新的方式失效 新方式: 使用DisableAppU ...

  10. React事件方法、React定义方法的几种方式、获取数据、改变数据、执行方法传值

    1.案例实现代码如下 import React, { Component } from 'react'; /** * 特别注意this,对于传值和绑定都十分重要 */ class Home4 exte ...