前端面试-webpack

1. 概念
一个打包模块化Javascript的工具，在webpack中，所有文件都可以看成是模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组成的文件。
2. 核心概念

• entry
  指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。
• output
  告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist。
• loader
  模块转换器，用于将模块的原内容按照需要转换成你想要的内容。
• plugin
  在webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果。
• bundle
  由webpack打包出来的文件。
• chunk
  代码块，一个chunk由多个模块组合而成，用于代码的合并与拆分。
• module
  开发中的单个模块，在webpack中，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块。

3. 主要作用

• 模块打包
  可以将不同模块的文件打包整合在一起，并且保证他们之间的引用正确，执行有序。根据业务自由划分文件模块，保证项目结构的清晰和可读性。
• 编译兼容
  通过webpack的Loader机制，可以编译转换诸如：.less,.vue,.jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性，新语法做开发，提高开发效率。
• 能力扩展
  通过webpack的Plugin机制，在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，进一步提高自动化程度，工程效率以及打包输出的质量。

4. 常见的loader
默认情况下，webpack只支持对js和json文件进行打包，但是像css，html，png等其他类型的文件，webpack则无能为力。因此需要配置响应的loader进行文件内容的解析转换。

• image-loader：加载并且压缩图片文件。
• less-loader：加载并编译LESS文件。
• sass-loader：加载并编译SASS/SCSS文件。
• css-loader：加载CSS，必须配合使用style-loader。
• style-loader：用于将CSS编译完成的样式挂载到页面的style标签上。
• bable-loader：把ES6转换成ES5。
• eslint-loader：通过ESLint检查Javascript代码。
• vue-loader：加载并编译Vue组件。
• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)。

5. 常见的plugin
webpack中的plugin在于解决loader无法实现的其他事。

• HtmlWebpackPlugin：简化HTML文件创建。
• mini-css-extract-plugin：分离样式文件，CSS提取为独立文件，支持按需加载。
• clean-webpack-plugin：目录清理。

6. 提高webpack构建速度

• 代码压缩
  （1）JS压缩
  （2）CSS压缩
  使用mini-css-extract-plugin。
  （3）HTML压缩
  使用HtmlWebpackPlugin插件来生成 HTML 的模板时候，通过配置属性minify进行 html 优化。

module.exports = {
    plugin:[
        new HtmlwebpackPlugin({
            minify:{
                minifyCSS: false, // 是否压缩css
                collapseWhitespace: false, // 是否折叠空格
                removeComments: true // 是否移除注释
            }
        })
    ]
}

• 图片压缩
  配置image-webpack-loader。
• 缩小打包域
  排除webpack不需要解析的模块，即使用loader的时候，在尽量少的模块中使用。
• 减少ES6转为ES5的冗余代码
  使用bable-plugin-transform-runtime插件。
• 提取公共代码
  通过配置CommonsChunkPlugin插件，将公共代码抽离成单独文件。