面试题：webpack介绍和简单使用
一、webpack（模块化打包工具）
1. webpack是把项目当作一个整体，通过给定的一个主文件，webpack将从这个主文件开始找到你项目当中的所有依赖文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件
2. 通过设置webpack.config.js 的配置，由于webpack是基于Node构建的，webpack配置文件中所有的合法node语法都可以用
二、安装webpack
2.1先全局安装
cnpm install webpack -g
cnpm install webpack-cli -g
npm install webpack -g
npm install webpack-cli -g
yarn global add webpack
yarn global add webpack-cli
2.2 测试版本
webpack -V
webpack-cli -V
三、简单用一下webpack
webpack==》本身之前是打包js
如果要打包：html、css···需要借助一些东西
1、进入项目目录，随便创建一个js文件
./src/index.js
2、在该目录中下载wepack
cnpm install'webpack -S
3、在终端执行：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 -S
2.引入
var HtmlWebpackPlugin =
require('html-webpack-plugin');
3.配置
plugins:[
new HtmlWebpackPlugin({
})
]
4.配置参数说明
4.1 指定模版页面
template:'./src/index.html',
4.2 修改默认输出文件名
filename:'xx.html'
4.3 允许插入到模板中的一些chunk
chunks:['jquery','xx']
4.4 配置不允许注入的thunk
excludeChunks:['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压缩打包
压缩打包css
1．单独抽离css文件
1.1下载插件：
:mini-css-extract-plugin
1.2 引入插件:
Var MiniCssExtractPlugin
require('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