面试官：你了解Webpack吗？

Posted 2021-02-16 彭煜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面试官：你了解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 //只有压缩率比这个值小的资源才会被处理
    })
  ]
  
  
};