webpack面试题

什么是webpack

Webpack是一个打包模块化 javascript 的工具，它会从 main.js 出发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有依赖打包到一个单独的文件中。

Loader机制的作用是什么？

webpack默认只能打包js文件，配置里的module.rules数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换打包成js。
注意：

• use属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的；
• 每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如css-loader?minimize中的minimize告诉css-loader要开启 CSS 压缩。

常用loader

css-loader读取 合并CSS 文件
style-loader把 CSS 内容注入到 JavaScript 里
sass-loader 解析sass文件（安装sass-loader，node-sass）
postcss-loader自动添加浏览器兼容前缀（postcss.config配置）
url-loader将文件转换为base64 URI。
vue-loader处理vue文件

Plugin（插件）的作用是什么？

Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。
Webpack 是通过plugins属性来配置需要使用的插件列表的。plugins属性是一个数组，里面的每一项都是插件的一个实例，在实例化一个组件时可以通过构造函数传入这个组件支持的配置属性。

常见Plugins

HtmlWbpackPlugin自动在打包结束后生成html文件，并引入bundle.js
cleanwebPackPlugin打包自动删除上次打包文件

ExtractTextPlugin插件的作用

ExtractTextPlugin插件的作用是提取出 JavaScript 代码里的 CSS 到一个单独的文件。
对此你可以通过插件的filename属性，告诉插件输出的 CSS 文件名称是通过[name]_[contenthash:8].css字符串模版生成的，里面的[name]代表文件名称，[contenthash:8]代表根据文件内容算出的8位 hash 值， 还有很多配置选项可以在ExtractTextPlugin的主页上查到。

sourceMap

是一个映射关系，将打包后的文件隐射到源代码，用于定位报错位置
配置方式:
例如：devtool：‘source-map’
加不同前缀意义：
inline:不生成映射关系文件，打包进main.js
cheap: 1.只精确到行，不精确到列，打包速度快 2.只管业务代码，不管第三方模块
module：不仅管业务代码，而且管第三方代码
eval:执行效率最快，性能最好
最佳实践：
开发环境：cheap-module-eval-source-map
线上环境：cheap-mudole-source-map

HMR热模块更新

借助webpack.HotModuleReplacementPlugin()，devServer开启hot
场景1： 实现只刷新css，不影响js
场景2： js中实现热更新，只更新指定js模块
if (module.hot) {
module.hot.accept(’./library.js’, function() {
// Do something with the updated library module…
});
}

Bable编译配置

安装

npm install --save-dev babel-loader @babel/core
loader

{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }

编译规则模块安装

npm install @babel/preset-env --save-dev
配置,option可以抽出到.bablerc文件中

options:{
    "presets": [["@babel/preset-env",{//编译规则
        useBuiltIns:'usage'//根据业务代码，按需引入
    }]]
}

如果配置了 useBuiltIns:‘usage’，不用引入polyfill
安装polyfill，补充缺失的语法，在入口js引入

npm install --save @babel/polyfill
import "@babel/polyfill";

tree shaking

引入es6模块时候，实现部分引入，业务代码不需要的不打包

开发环境配置
生产环境无需配置

optimization:{
        usedExports:true
    }

注意:不需要treeShaking的文件要在package.json配置

“sideEffects”:["@babel/polyfill","*.css"],

开发环境与正式环境分开打包

提取开发环境与正式环境配置文件公共部分，通过webpack-merge模块，合并出打包

code spliting（代码分割）

在项目使用第三方库时存在问题

打包文件过大，加载时间长
业务代码变更用户需要重新加载三方库文件
解决方式一（自己做代码分割）

配置多个入口，三方库文件单独打包，再次访问只需加载业务代码

entry: {
        loadash:'./src/loadash.js',
        main: './src/main.js'
    },

解决方式二（用插件做代码分割）

不需要额外下载插件，webpack集成，异步代码不需要配置

 optimization:{
        splitChunks:{
            chunks:'all'
        }
    }

lazy loading（模块懒加载）

借助import()语法异步引入组件，实现文件懒加载
prefetch,preloading
webpack提倡多写异步代码，提升代码利用率，从而提升页面性能
先加载主业务文件，prefetch利用网络空闲时间，异步加载组件
import(/* webpackPrefetch: true / ‘LoginModal’);
preload和主业务文件一起加载，异步加载组件
import(/ webpackPreload: true */ ‘ChartingLibrary’);

css文件代码分割

将css文件单独打包，一般用在生产打包
安装

npm install --save-dev mini-css-extract-plugin

配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

rules:[
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',//分析css文件中间的关系合并成一个
                        options: {
                            importLoaders: 2 //保证sass文件引入其他sass文件也走全部的loader
                        }
                    },
                    'sass-loader',
                    'postcss-loader'

                ]

            }
        ]
      },
    plugins: [
        new MiniCssExtractPlugin({}),
      ],
}

注意
如果没有生成css包，可能得原因：
treeshaking导致css文件被忽略

"sideEffects": [
    "@babel/polyfill",
    "*.css",
    "*.scss"
  ],

多页面打包配置

加入口文件配置

entry: {
        main: './src/main.js',
        sub:'./src/subPage.js'
    },

生成多个html文件，通过chunks配置html引入的打包文件

plugins: [
    new HtmlWebpackPlugin({
        template: 'index.html',
        filename:'index.html',
        chunks:['runtime','vendors~main','main']
    }),
    new HtmlWebpackPlugin({
        template: 'index.html',
        filename:'sub.html',
        chunks:['runtime','vendors~main','sub']
    }),
],