面试官:你了解Webpack吗?
前言
大家好哟,这是第四篇面试官篇,估计还有个七八十篇面试文章(前端苦命)。
这篇文章介绍了webpack核心概念以及如何使用。
开始吧!
概念
webpack的核心概念只要记住下面四个就够用了(除非大佬是webpack配置工程师)。
- 入口
- 出口
- loader
- 插件
入口
module.exports = {
entry: './src', //单入口
// or
entry: [
'./src', //多入口
'/src2',
],
// or
entry: {
main: './src', //对象写法的单入口简写
}
//or
entry: {
app: './src/index.js', //对象写法的第三方库写法
vendors: './src/script/moment.js'
}
// or
entry: {
page1: './src/page1.js',
page2: './src/page2.js',
page3: './src/page3.js',
} }
其实入口很简单,webpack要打包你的项目,那你的项目主代码摆放在哪个文件呢?
比如vue,那就是src,怼到entry参数上,webpack就知道要去哪里打包项目了。
output
module.exports = {
/*
output接受对象属性,参数为
filename: 打包后的文件名
path: 打包后所需导出的路径
*/
output: {
filename: 'index.js',
path: path.resolve(__dirname, '/dist')
}
// or 多入口
entry: {
app: './src/index.js',
vendors: './src/script/moment.js'
},
output: {
filename: '[name].js',
path: __dirname + 'dist'
}
}
出口和入口一样简单,顾名思义,项目主代码被webpack打包完,要在哪里导出呢? 比如vue, 那就是dist,怼到output参数里文件名和路径,搞定。
Loader
loader看名字意思就是加载器,主要用于对模块的源代码进行转换。
module.exports = {
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
如上代码,我们加载了一个ts的loader,它会帮助webpack把我们项目中的typescript文件转成javascript文件。
插件
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};
插件的话算是webpack最酷的东西了吧,碰到麻烦的项目难题,可以自己写个插件导入到webpack,完美搞定。
在自己的项目中使用webpack
假设俺们有个小项目,想要进一步的优化加载,压缩代码之类的,我们可以自己写一个webpack配置项。
首先,我们有一个使用typesciprt、scss的项目有,需要使用gzip压缩代码,我们可以这样配置。
const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = {
//入口,出口如上面的教程,只要确定你的主要代码文件和你编译后倒出的位置就可以。
entry: './pages',
output: {
filename: 'index',
path: path.resolve(__dirname, '/dist')
},
moludes: [
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader" // 将 Sass 编译成 CSS
}
]
},
{
test: /\.ts$/,
use: [
{
loader:"ts-loader" // 将ts文件编译成javacsript
}
]
}
]
], plugins:[
new CompressionWebpackPlugin({
asset: '[path].gz[query]', //替换文件路径和名字
algorithm: 'gzip',//开启压缩
test: new RegExp(
'\\.(js|css)$' //压缩js文件和css文件
),
threshold: 10240,//只处理比这个值大的资源(字节)。
minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
})
] };
这样就完成啦,其实webpack很强大,等有空了以后会发深入webpack的文章,比如说自己写loader,写插件之类的。
等等好像又跑题了。
作者自己对这个问题的解答如下:
- 告诉面试大佬,webapck的四个核心概念,并介绍一些其他的模块,例如mode,依赖图的概念等等。
- 介绍几个webpack的插件,如压缩gzip、如何处理dev中的console.log的模块等等。
- 你也可以说说自己在写插件或者loader时碰到的问题,如何解决的。
好了这篇需要讲的东西已经结束了。
面试系列第一篇: 面试官:你知道Callback Hell(回调地狱)吗?
面试系列第二篇: 面试官:react和vue有什么区别吗?
面试系列第三篇: 面试官:你了解es6的知识吗?
如果您有收获或者疑问请在下方评论,求赞!谢谢观看到这里。
链接:https://juejin.im/post/5cafe9c1e51d456e3267e3ea
面试官:你了解Webpack吗?的更多相关文章
- 手写webpack核心原理,再也不怕面试官问我webpack原理
手写webpack核心原理 目录 手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6 ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- 面试官:自己搭建过vue开发环境吗?
开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...
- 每日一问:面试结束时面试官问"你有什么问题需要问我呢",该如何回答?
面试结束时面试官问"你有什么问题需要问我呢",该如何回答?
- 面试官的七种武器:Java篇
起源 自己经历过的面试也不少了,互联网的.外企的,都有.总结一下这些面试的经验,发现面试官问的问题其实不外乎几个大类,玩不出太多新鲜玩意的.细细想来,面试官拥有以下七种武器.恰似古龙先生笔下的武侠世界 ...
- 关键词:ACM & 大小端 & 面试官
关于“ACM” fender0107401 :面试了一个在ACM拿过奖的人 我问了他几个问题: 读取数组中的一个元素,计算复杂度是多少,回答不清楚. 往链表里面存一个数,不排序的情况下,计算复杂度是多 ...
- Android开发面试经——6.常见面试官提问Android题②(更新中...)
版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http://blog.csdn.net/fi ...
- Android开发面试经——5.常见面试官提问Android题①
版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客: http://blog.csdn.net/f ...
- 书评<<剑指offer 名企面试官精讲典型编程题>>
前前后后阅读了一周, 感慨很多, 面试考察的是一个人的综合能力, 这一点从面试官的角度去解读, 确实对面试的理解更立体. *) 具体考察的点1) 扎实的基础2) 高质量的代码3) 清晰的思路4) ...
随机推荐
- grouping sets 的使用
grouping sets 可以用于在计算分组聚合函数值的同时计算合计值 -- 查询结果group_id为NULL的那一行即为合计值 select group_id , count(distinct ...
- 20165215 2017-2018-2 《Java程序设计》第6周学习总结
20165215 2017-2018-2 <Java程序设计>第6周学习总结 教材学习内容总结 chapter8 Java把String类定义为final类,即String类不能有子类 用 ...
- java获取前一天时间SimpleDateFormat,java判断某个时间段
java获取前一天时间SimpleDateFormat SimpleDateFormat predf = new SimpleDateFormat("yyyy-MM-dd"); D ...
- Selenium 常用定位对象元素的方法
常见定位对象元素的方法 在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方 ...
- GoldenGate 12.3发布
新特性: oracle db1. 支持12.2 oracle db2. 支持微服务架构, 可以使用restful api 管理OGG3. Parallel replicat,性能比integrated ...
- Qt发布可执行程序
在Qt Creator下用release跑一遍程序,生成相应的EXE文件. 在Qt Creator下编译好的release下的 youProgramName.exe 拷贝到一个文件夹下面: 在 ...
- printf("loops %u / %u%c[K\n", loops + 1, opts->loops, 27); printf("%cM", 27);
serialcheck.c中的一段代码一直弄不明白: do { status = stress_test_uart_once(opts, fd, data, data_len); memset(opt ...
- Cannot assign “A1”: “B1” must be a “C1” instance.
应用 django FORM 录入数据 必须 item_id supplier_id 不能item, supplier
- android 文本框不获取焦点的两种方式
当进入一个页面以后,我们不希望EditText获取焦点自动弹出软键盘,占据大半个屏幕. 方法一 让LinearLayout率先获取焦点,代码如下: <LinearLayout android:f ...
- python简说(三)字典
一.字典 stu_info = {"name": "王志华", "age": 18, "addr": "北京& ...