webpack面试题

面试题：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