面试题：webpack介绍和简单使用
一、webpack（模块化打包工具）1. webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件2. 通过设置webpack.config.js 的配置，由于webpack是基于Node构建的，webpack配置文件中所有的合法node语法都可以用
二、安装webpack
2.1先全局安装cnpm install webpack -gcnpm install webpack-cli -gnpm install webpack -gnpm install webpack-cli -gyarn global add webpackyarn global add webpack-cli2.2 测试版本webpack -Vwebpack-cli -V三、简单用一下webpackwebpack==》本身之前是打包js如果要打包：html、css···需要借助一些东西1、进入项目目录，随便创建一个js文件./src/index.js2、在该目录中下载wepackcnpm install'webpack -S3、在终端执行：webpack命名就会打包成功
面试题：webpack的入口和输出
// Entry（入口）：Webpack 从哪里开始构建依赖图。
module.exports = {entry: './src/index.js',
};
// Output（输出）：Webpack 打包后的文件存放位置。
module.exports = {output: {path: path.resolve(__dirname, "public"),filename: "zhangsan.js",},
};
面试题：入口多种配置方式
一、多文件打包成一个文件问题：多个入口文件==》单文件出口解决:var path = require('path');module.exports = {entry: ['./src/a.js','./src/b.js'],output:{path: path.resolve(__dirname, 'dist'),filename:'main.js',}}
二、多文件打包成多文件问题：多个入口文件==》多文件出口解决:var path = require('path');module.exports = {entry: {a:'./src/a.js',b:'./src/b.js',},output:{path: path.resolve(__dirname, 'dist'),}}
面试题：loader的概念
一、loader是什么webpack 只能理解JavaScript 和JSON文件，这是webpack开箱可用的自带能力。loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。
二、loader的配置写法：
module:{rules:[test: /\.css$/,use:['style-loader','css-loader'],}],}
1、test属性，识别出哪些文件会被转换。2、use属性，定义出在进行转换时，应该使用哪个loader。****一定要记住下载loader
面试题：压缩打包HTML
插件：html-webpack-plugin
使用步骤:
1.下载cnpm install html-webpack-plugin -S2.引入var HtmlWebpackPlugin =require('html-webpack-plugin');3.配置plugins:[new HtmlWebpackPlugin({})]4.配置参数说明4.1 指定模版页面template:'./src/index.html',4.2 修改默认输出文件名filename:'xx.html'4.3 允许插入到模板中的一些chunkchunks:['jquery','xx']4.4 配置不允许注入的thunkexcludeChunks:['xx']5.多页面打包需要创建多个newHtmlWebpackPlugin
面试题：HTML加入图片
一、加载图片的loader ==> file-loader
{test: /\.(png|jpg|jpeg|gif)$/,use:[{loader:'file-loader',options:{esModule:false,outputPath:'img/'}}]
}
二、让html支持图片的loader ==> html-withimg-loader
{test:/\.html$/,use:'html-withimg-loader'
}
面试题：HTML加入字体图标
添加字体图标：
{test: /\.(eot|svg|ttf|woff|woff2)$/,use:'file-loader?name=./fonts/[name].[ext]'
}
面试题：单独分离CSS压缩打包
压缩打包css1．单独抽离css文件1.1下载插件：:mini-css-extract-plugin1.2 引入插件:Var MiniCssExtractPluginrequire('mini-css-extract-plugin');1.3修改loader:{test:/\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader']}1.4使用插件plugins:[new MiniCssExtractPlugin()]2．压缩css文件插件:optimize-css-assets-webpack-plugin -S
面试题：webpack的loader和plugin的区别？
Loader：用于模块源码的转换，loader描述了webpack如何处理非JS模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言转换为JS，或者将内联图转换为data URL。比如：CSS-Loader，Style-Loader等Plugin：用于解决loader无法实现的其实事情，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件，例如：CommonPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面文件的应用程序共享代码创建的bundle
面试题：怎么使用webpack对项目进行优化?
构建优化:
1、减少编译体积ContextReplacementPugin、lgnorePlugin、babel-plugin-import、babel-plugin-transform-runtime。
2、并行编译happypack、thread-loader、uglifyWebpackPlugin开启并行
3、缓存cache-loader、hard-source-webpack-plugin、uglifyjsWebpackPlugin开启缓存、babel-loader开启缓存
4、预编译dllWebpackPlugin&&DllReferencePlugin、auto-dll-webpack-plugin
性能优化：
1、减少编译体积Tree-shaking、Scope-Hositing
2、hash缓存webpack-md5-plugin
3、拆包 splitChunksPlugin、import（）、require.ensure
