面试官:你了解Webpack吗?

8,346 阅读2分钟

前言

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

这篇文章介绍了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的知识吗?

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