面试官：你了解Webpack吗？

落日映苍穹つ 2022-10-01 07:43 199阅读 0赞

## 前言 ##

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

这篇文章介绍了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（回调地狱）吗？ ][Callback Hell_]

面试系列第二篇： [面试官：react和vue有什么区别吗？ ][react_vue_]

面试系列第三篇： [面试官：你了解es6的知识吗？ ][es6_]

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

转载于:https://juejin.im/post/5cafe9c1e51d456e3267e3ea

[Callback Hell_]: https://juejin.im/post/5ca2107b6fb9a05e5516388e
[react_vue_]: https://juejin.im/post/5ca6fd2f6fb9a05e643def4f
[es6_]: https://juejin.im/post/5ca84b3de51d454f9528e276