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