Webpack 面試題

一、談談你對Webpack的理解？

WebPack 是一個模塊打包工具，你可以使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它能夠很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對於不同類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源

快速記憶

 

一、Webpack如何解決跨域問題？（三種方式）來源

1. 使用代理：服務端是別人的，使用這個方式

devServer:{
    proxy:{  // 重寫的方式，把請求代理到express服務器上
        '/api':{
            target:'http://localhost:3000',
            pathRewrite:{'/api':''} // 若請求路徑爲 /user ，不是 /api/user，可以把/api替換爲空

  } } },

2. 前端模擬數據

devServer:{
    // 模擬數據
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'小白'})
        })
    }
}

3.  服務端是自己寫的，就可以把前端代碼啓動到服務端上

// server.js
let express = require('express');
let app = express();
let webpack = require('webpack');

let middle = require('webpack-dev-middleware'); // 引入這個
let config = require('./webpack.config.js');    // 配置文件
let compiler = webpack(config);

app.use(middle(compiler))

app.get('/user',(req,res)=>{
    res.json({name:'小白2'})
})
app.listen(3001)

 

二、webpack 實現 Tree Shaking（webpack原文）

1. 打開項目中package.json文件，開啓全部文件 Tree Shaking（只針對exports後的文件進行打包，其他的會被清除）

{
  "name": "tree-shaking",
  "sideEffects": false, // 開啓
  "version": "1.0.0",
  ...
}

2. 若 sideEffects 爲數組形式，數組中存放的是不被Tree Shaking的文件

{
  "name": "tree-shaking",
  "sideEffects": ["./src/polyfill.js"],
  "version": "1.0.0",
  ...
}

3. 對第三方函式庫優化時候，需打開 webpack.config.js 文件進行配置 uglifyjs 插件

注意：usedExports 纔是 Tree Shacking，使用時會自動判斷沒使用的代碼，並標記 unused harmony 的註解，要移除的話要另外使用 minify。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer: [
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: { unused: true },
                mangle: false,
                output: {
                    beautify: true
                }
            },
        })
    ],
  }
};