面试官:你了解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) ...
随机推荐
- flask模板的基本用法(定界符、模板语法、渲染模板),模板辅助工具(上下文、全局对象、过滤器、测试器、模板环境对象)
flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTM ...
- web3.js编译Solidity,发布,调用全部流程(手把手教程)
web3.js编译Solidity,发布,调用全部流程(手把手教程) 下面教程是打算在尽量牵涉可能少的以太坊的相关工具,主要使用web3.js这个以太坊提供的工具包,来完成合约的编译,发布,合约方法调 ...
- myeclipse项目导入IDEA
1.import project from external model (不需要删除myeclipse多余文件) https://blog.csdn.net/d276031034/artic ...
- 专题8:javascript函数详解
函数是一段可以反复调用的代码块.函数还能接受输入的参数,不同的参数会返回不同的值. 函数的声明 JavaScript 有三种声明函数的方法. (1)function 命令 function命令声明的代 ...
- JustOj 1910: 人见人爱A+B
[提交][状态][讨论版] 题目描述 北大的acm上面已经有10来道A+B的题目了,相信这些题目曾经是大家的最爱,希望今天的这个A+B能给大家带来好运,也希望这个题目能唤起大家对ACM曾经的热爱. ...
- [转载]时间显示插件 flipclock.js
<html> <head> <link rel="stylesheet" href="/assets/css/flipclock.css&q ...
- How many zero's and how many digits ? UVA - 10061
Given a decimal integer number you will have to find out how many trailing zeros will be there in it ...
- javax.servlet.ServletException: Servlet.init() for servlet springmvc threw exception
type Exception report message Servlet.init() for servlet springmvc threw exception description The s ...
- django后台管理-ModelAdmin对象
Django最强大的部分之一是自动生成的管理后台界面. 它从你的模型中读取元数据,以提供一个快速的.以模型为中心的界面,信任的用户可以在这里管理你网站上的内容. 建议管理后台仅作为组织的一个内部管理工 ...
- lnmp 安装redis-最全
一. 安装redis 1.下载,解压,编译 $ wget http://download.redis.io/releases/redis-3.2.8.tar.gz $ tar -xzf redis-3 ...