JZTXT

Webpack 面试题

发布时间 2023-05-05 17:10:47作者: 小短腿奔跑吧

一、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
                }
            },
        })
    ],
  }
};