前言
大家好哟，这是第四篇面试官篇，估计还有个七八十篇面试文章（前端苦命）。
这篇文章介绍了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吗？
原文地址：https://www.cnblogs.com/Antwan-Dmy/p/10714380.html