webpack面试总结

概念：
打包工具，把整个项目看做是一个整体，通过给定的主文件，从这个主文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可以识别的js文件。
entry:
用来写入口文件，是整个依赖关系的根，多个文件可以写成一个对象

var baseConfig = {
        entry: {
            main: './src/index.js'
        }
    }

output：：即使入口文件多个，但是只有一个输出配置
定义的入口文件有多个，需要使用占位符来确保输出文件的唯一性

output: {
        filename: '[name].js',
        path: path.resolve('./build')
    }

loader：
1.可以实现对不同格式的文件的处理；
2.转换这些文件，从而使其能够被添加到依赖图中；
这是最重要的一个部分，通过使用不同的loader，可以调用外部的脚本及工具，实现对不同格式文件的处理，需要单独使用module进行配置

var baseConfig = {
                entry: {
                    main: './src/index.js'
                },
                output: {
                    filename: '[name].js',
                    path: path.resolve('./build')
                },
                devServer: {
                    contentBase: './src',
                    historyApiFallBack: true,
                    inline: true
                },
                module: {
                    rules: [
                        {
                            test: /\.less$/,
                            use: [
                                {loader: 'style-loader'},
                                {loader: 'css-loader'},
                                {loader: 'less-loader'}
                            ],
                            exclude: /node_modules/
                        }
                    ]
                }
            }

plugins：
并不是直接操作单个文件，而是对整个构建过程起作用。
ExtractTextWebpackPlugin: 它会将入口中引用css文件，都打包都独立的css文件中，而不是内嵌在js打包文件中。
HtmlWebpackPlugin
作用： 依据一个简单的index.html模版，生成一个自动引用你打包后的js文件的新index.html
HotModuleReplacementPlugin
它允许你在修改组件代码时，自动刷新实时预览修改后的结果

产品阶段的构建
压缩、优化、缓存、分离css和js

优化插件：
OccurenceOrderPlugin:
UglifyJsPlugin

一、webpack打包原理

把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

二、webpack的优势
(1)以 commonJS 的形式来书写脚本，方便旧项目进行代码迁移
(2) 开发便捷
(3) 扩展性强，插件机制完善
(4)能被模块化的不仅仅是 JS 了。
三、什么是loader，什么是plugin
loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件，对于其他资源如css，img等，是没有办法加载的，这时就需要对应的loader将资源转化，从而进行加载。
plugin用于扩展webpack的功能。不同于loader，plugin的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。
四、什么是bundle，什么是chunk，什么是module
bundle：是由webpack打包出来的文件
chunk：是指webpack在进行模块依赖分析的时候，代码分割出来的代码块
module：是开发中的单个模块。
五.webpack 和 gulp 的区别？
webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。
六、如何自动生成webpack配置文件？
webpack-cli/vue-vli
七、什么是模热更新？有什么优点？
模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。
八、webpack-dev-server 和 http服务器的区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。
九、什么是长缓存？在webpack中如何做到长缓存优化？
浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。
在webpack中，可以在output给出输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。
十、什么是Tree-sharking
tree-sharking 是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。