面試官：你瞭解Webpack嗎？

時間 2019-11-06

標籤面試瞭解 webpack 欄目快樂工作简体版

原文原文鏈接

前言

你們好喲，這是第四篇面試官篇，估計還有個七八十篇面試文章（前端苦命）。javascript

這篇文章介紹了webpack核心概念以及如何使用。css

開始吧！前端

概念

webpack的核心概念只要記住下面四個就夠用了（除非大佬是webpack配置工程師）。vue

入口
出口
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要打包你的項目，那你的項目主代碼擺放在哪一個文件呢？java

好比vue，那就是src，懟到entry參數上，webpack就知道要去哪裏打包項目了。react

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參數裏文件名和路徑，搞定。webpack

Loader

loader看名字意思就是加載器，主要用於對模塊的源代碼進行轉換。es6

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

如上代碼，咱們加載了一個ts的loader，它會幫助webpack把咱們項目中的typescript文件轉成javascript文件。web

插件

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 //只有壓縮率比這個值小的資源纔會被處理
    })
  ]
  
  
};
複製代碼