webpack面试题

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