前端面试之webpack

问题预览

1、webpack的基本配置
2、如何利用webpack优化前端性能（提高性能和体验）
3、提高webpack的构建速度？
4、如何在vue项目中实现按需加载？

问题解答：

1、webpack的基本配置

基本配置有：
entry（项目入口）
output（出口文件）
module（模块的处理）
plugin（loader不能处理的都交给它）

(1).entry（项目入口）

webpack.config.js

		const config = {
		  entry: './path/to/my/entry/file.js'
		};

		module.exports = config;

这是单个入口语法简写，入口的常见场景还有分离应用程序和第三方库的入口以及多页面应用程序。详见官网：webpack项目入口详解

(2).output（出口文件）

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

了解更多关于output信息

(3).module（模块的处理）

webpack只能处理js文件，浏览器也可能不识别一些最新的js语法，所以我们就要对传入的模块做一些预处理，这就涉及到了webpack的又一核心概念“loader”’

loader的作用和基本用法：
webpack中，loader的配置主要在module.rules中进行，这是一个数组，每一个rule做了两件事

识别文件类型，来确定具体处理该数据的loader(Rule.test属性)
使用相关的loader对文件进行相关的操作转换(Rule.use属性）

常用的loader：
　　转换编译：script-loader, babel-loader,ts-loader,coffee-loader
　　处理样式：style-loader,css-loader,less-loader,sass-loader,postcss-loader
　　处理文件：raw--loader,url-loader,file-loader
　　处理数据：csv-loader,xml-loader
　　处理模板语言：html-loader,pug-loader,jade-loader,markdown-loader
　　清理和测试：mocha-loader,eslint-loader

了解更多loader知识

(4).plugin（插件）

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

扫描二维码关注公众号，回复： 11691839 查看本文章

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

了解更多plugin知识

2、如何利用webpack优化前端性能（提高性能和体验）

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件，利用cssnano（css-loader?minimize）来压缩css
利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数–optimize-minimize来实现
提取公共代码。

3、提高webpack的构建速度？

多入口情况下，使用CommonsChunkPlugin来提取公共代码
通过externals配置来提取常用库
利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
使用Happypack 实现多线程加速编译
使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
使用Tree-shaking和Scope Hoisting来剔除多余代码

4、如何在vue项目中实现按需加载？

Vue UI组件库的按需加载为了快速开发前端项目，经常会引入现成的UI组件库如ElementUI、iView等，但是他们的体积和他们所提供的功能一样，是很庞大的。而通常情况下，我们仅仅需要少量的几个组件就足够了，但是我们却将庞大的组件库打包到我们的源码中，造成了不必要的开销。

不过很多组件库已经提供了现成的解决方案，如Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安装以上插件后，在.babelrc配置中或babel-loader的参数中进行设置，即可实现组件按需加载了。
将 .babelrc修改为：

{
"presets": [
  ["es2015", { "modules": false }]
 ],
"plugins": [["component", [
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-default"
   }
 ]]]
}

单页应用的按需加载现在很多前端项目都是通过单页应用的方式开发的，但是随着业务的不断扩展，会面临一个严峻的问题——首次加载的代码量会越来越多，影响用户的体验。

通过 import() 语句来控制加载时机，webpack内置了对于 import() 的解析，会将 import() 中引入的模块作为一个新的入口在生成一个chunk。当代码执行到 import() 语句时，会去加载Chunk对应生成的文件。import()会返回一个Promise对象，所以为了让浏览器支持，需要事先注入Promise polyfill

更多关于webpack知识，详见webpack中文官网