前言

大家好哟,这是第四篇面试官篇,估计还有个七八十篇面试文章(前端苦命)。

这篇文章介绍了webpack核心概念以及如何使用。

开始吧!


概念

webpack的核心概念只要记住下面四个就够用了(除非大佬是webpack配置工程师)。

  • 入口
  • 出口
  • loader
  • 插件
  1. 入口

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就知道要去哪里打包项目了。

  1. 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参数里文件名和路径,搞定。

  1. Loader

loader看名字意思就是加载器,主要用于对模块的源代码进行转换。

module.exports = {
module: {
rules: [
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};

如上代码,我们加载了一个ts的loader,它会帮助webpack把我们项目中的typescript文件转成javascript文件。

  1. 插件

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,写插件之类的。

等等好像又跑题了。

作者自己对这个问题的解答如下:

  1. 告诉面试大佬,webapck的四个核心概念,并介绍一些其他的模块,例如mode,依赖图的概念等等。
  2. 介绍几个webpack的插件,如压缩gzip、如何处理dev中的console.log的模块等等。
  3. 你也可以说说自己在写插件或者loader时碰到的问题,如何解决的。

好了这篇需要讲的东西已经结束了。

面试系列第一篇: 面试官:你知道Callback Hell(回调地狱)吗?

面试系列第二篇: 面试官:react和vue有什么区别吗?

面试系列第三篇: 面试官:你了解es6的知识吗?

如果您有收获或者疑问请在下方评论,求赞!谢谢观看到这里。

 

链接:https://juejin.im/post/5cafe9c1e51d456e3267e3ea

面试官:你了解Webpack吗?的更多相关文章

  1. 手写webpack核心原理,再也不怕面试官问我webpack原理

    手写webpack核心原理 目录 手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6 ...

  2. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  3. 面试官:自己搭建过vue开发环境吗?

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

  4. 每日一问:面试结束时面试官问"你有什么问题需要问我呢",该如何回答?

    面试结束时面试官问"你有什么问题需要问我呢",该如何回答?

  5. 面试官的七种武器:Java篇

    起源 自己经历过的面试也不少了,互联网的.外企的,都有.总结一下这些面试的经验,发现面试官问的问题其实不外乎几个大类,玩不出太多新鲜玩意的.细细想来,面试官拥有以下七种武器.恰似古龙先生笔下的武侠世界 ...

  6. 关键词:ACM & 大小端 & 面试官

    关于“ACM” fender0107401 :面试了一个在ACM拿过奖的人 我问了他几个问题: 读取数组中的一个元素,计算复杂度是多少,回答不清楚. 往链表里面存一个数,不排序的情况下,计算复杂度是多 ...

  7. Android开发面试经——6.常见面试官提问Android题②(更新中...)

    版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http://blog.csdn.net/fi ...

  8. Android开发面试经——5.常见面试官提问Android题①

    版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客: http://blog.csdn.net/f ...

  9. 书评<<剑指offer 名企面试官精讲典型编程题>>

      前前后后阅读了一周, 感慨很多, 面试考察的是一个人的综合能力, 这一点从面试官的角度去解读, 确实对面试的理解更立体. *) 具体考察的点1) 扎实的基础2) 高质量的代码3) 清晰的思路4) ...

随机推荐

  1. Linux服务器---邮件服务postfix安装

    安装postfix postfix是一个快速.易于管理.安全性高的邮件发送服务,可以配合dovecot实现一个完美的邮箱服务器. 1.安装postfix [root@localhost ~]# rpm ...

  2. linux 文件压缩与解压缩

  3. Lambda表达式select()和where()的区别

    可能很多同学和我一样对于select()和where()区别并不是太清晰,其实两者还是有本质区别的. 1.where()用法:必须加条件,且返回对象结果. static void Main(strin ...

  4. git push跳过用户名和密码认证配置教程

    在使用git commit命令将修改从暂存区提交到本地版本库后,只剩下最后一步将本地版本库的分支推送到远程服务器上对应的分支了,如果不清楚版本库的构成,可以查看我的另一篇,git 仓库的基本结构. 新 ...

  5. bind的封装

    1.bind.call.apply三者的区别: 1)bind的返回值是一个函数体,不会被立即调用 2)call.apply会立即调用,第一个参数都是用来改变this的指向,两者的区别是前者传递参数的时 ...

  6. codeSourcery交叉编译环境

    arm-none-Linux-gnueabi-gcc是 Codesourcery 公司(目前已经被Mentor收购)基于GCC推出的的ARM交叉编译工具.可用于交叉编译ARM系统中所有环节的代码,包括 ...

  7. ES6知识整理(7)--Set和Map数据结构

    (文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) Set构造函数 初始化一个值不重复的数组,适合做数组去重. 2种数组去重的方法: 这里再说下Array.from(),表示以一个类数组|| ...

  8. Golang字符串解析成数字

    package main import ( "strconv" "fmt" ) func main() { // 使用ParseFloat解析浮点数,64是说明 ...

  9. jquery .width和css("width", )区别

    1.$.fn.width会根据是否是borderBox来计算新的宽度,如果是borderBox,会额外加上padding和border的宽度,计算时只是按照px来,用rem做单位会出错: 2.$.fn ...

  10. Solr导入MySQL数据之dataimport-handler

    Solr不借助手动JSolr编程情况下也可以将Mysql的数据导入到Solr中.实现方式是安装dataimport-Handler从关系数据库将数据导入到索引库. 1.向SolrCore中加入jar包 ...