1. 首页

2020玩转webpack系列之webpack核心概念(一)

020玩转webpack系列之webpack核心概念(一)"

webpack核心概念之entry用法

Entry用来指定打包入口

上方依赖图的入口是entry,对于非代码,字体依赖也会不断加入到依赖图中。所有的模块之间会存在一些依赖关系, 因此webpack里面会根据entry找到它的依赖,入口文件的依赖也可能依赖其他的一些文件,在这棵依赖树上,只要遇到依赖,webpack就会将其加入到依赖图中,最终遍历完后才会生成一些打包资源。

Entry的用法

单入口:entry是一个字符串


module.exports = { entry:'./path/src/index.js' } 复制代码

多入口: entry是一个对象


module.exports = { entry:{ app:'./src/app.js', myapp:'./src/myapp.js' } } 复制代码

核心概念之Output

Output用来告诉webpack如何将编译后的文件输出到磁盘

Output的用法:单入口配置


module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' } } 复制代码

Output的用法:多入口配置


module.exports = { entry: { app:'./src/app.js', search:'./src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' } } 复制代码

[name].js通过占位符确保文件名称的唯一 , 单个入口的文件名是可以写死的,像这种多个入口就需要通过占位符对他进行一个区分。

核心概念之Loaders

webpack原生只支持js和json两种文件类型,通过Loaders去支持其他如css类型并且把它们转化成有效的模块,并且可以添加到依赖图中。

loaders本身是一个函数,通过接收源代码然后经过loaders这个函数转换之后。会输出一个结果给下一步去使用。

常见的Loaders有哪些?

babel-loader:转换ES6,ES&等JS新特性语法 css-loader:支持.css文件的加载和解析。 less-loader:将less文件转换成css
ts-loader:将TS转换成JS
file-loader:进行图片,字体等的打包

Loaders的用法


config.module .rule('css') .test(/\.css$/) .use('css') .loader('css-loader!') module.export = config.toConfig(); 复制代码

这里用到的是webpack-chain的配置方案,.test指定匹配规则,.use指定文件类型,.loader指定使用的loader名称。

核心概念之Plugins

Plugins通常是用于打包输出的js文件的优化,资源的管理,和环境变量的注入,作用于整个构建过程。

常见的Plugins有哪些?

020玩转webpack系列之webpack核心概念(一)"


module.exports = { plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }) ] 复制代码

使用时只需要把你定义好的插件,放入plugins数组里就可以了。

核心概念之Mode

Mode是用来指定当前的构建环境是:production,development还是none,默认情况下是production。

development:设置process.env.Node_ENV的值为development。

production: 设置process.env.Node_ENV的值为production。

none:不开启任何优化选项。

写在最后

笔者最近在学webpack,想跟大家一起交流分享。webpack系列会持续更新,欢迎关注,如果可以的话那就再点个赞吧~xixi

作者:Key.L
链接:https://juejin.im/post/5e8870b9e51d4546ef3691f7

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:2020玩转webpack系列之webpack核心概念(一)

链接:https://www.javascriptc.com/3920.html

« 2020从源码窥探Webpack4.x原理
TypeScript 被吹过头了?»
Flutter 中文教程资源

相关推荐

QR code