前端面试--webpack

打代码小橙子

已于 2022-05-08 12:06:27 修改

阅读量1.4k

点赞数

文章标签：前端 webpack 面试

于 2022-05-03 18:03:06 首次发布

本文链接：https://blog.csdn.net/weixin_47964837/article/details/124557803

版权

百度安全验证

1、webpack的作用是什么，谈谈你对它的理解？

现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决Scss，Less……新增样式的扩展写法的编译工作。

所以现代化的前端已经完全依赖于webpack的辅助了。

现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。

react.js+WebPack

vue.js+WebPack

AngluarJS+WebPack

webpack其实就是静态资源打包工具。

可以把不同的js模块打包为一个个的chunk，最后根据配置打包为bundle

概念术语

Module：提供比完整程序接触面（surface area）更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
Chunk：这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 由 chunk 组成，其中有几种类型（例如，入口 chunk（entry chunk）和子 chunk（child chunk））。通常 chunk 会直接对应所输出的 bundle，但是有一些配置并不会产生一对一的关系。
Bundle：由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。

作者：越前君
链接：https://www.jianshu.com/p/8f9dfccf0c6b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

2. webpack的核心概念

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js

output ：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./distModule：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

Loader：模块转换器，用于把模块原内容按照需求转换成新内容。

Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

modal：分为开发和生成模式两种。

简单示例：

// 指示webpack怎么干活
// 运行webpack指令时加载其中的配置
//用common js 写
//所有构建工具都是基于node js写的
const { resolve } = require('path');
module.exports = {
    //webpack配置
    entry: './src/index.js',//入口起点
    //出口
    output: {
        filename: 'built.js',
        //__dirname nodejs 变量，代表当前文件的目录绝对路径
        path: resolve(__dirname, 'build')
    },
    //loader配置
    module: {
        rules: [
            //详细loader配置
            {
                //匹配哪些文件
                test: /\.css$/,
                use: [
                    //执行顺序从下到上 从右到左
                    //使用哪些loader
                    //创建style标签，将js中的样式资源插入进去，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中 变成样式字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 需要lesslodaer 和less
                    'less-loader'
                ]

            }
        ]
    },
    //plugins
    plugins: [
        //配置plugins
    ],
    mode: 'development',
    // 或者production
}

3. 前端为什么要进行打包和构建？

代码层面：

体积更小（Tree-shaking、压缩、合并），加载更快编译高级语言和语法（TS、ES6、模块化、scss）兼容性和错误检查（polyfill,postcss,eslint）研发流程层面：

统一、高效的开发环境统一的构建流程和产出标准集成公司构建规范（提测、上线）

4. 什么是Tree-sharking?

指打包中去除那些引入了但在代码中没用到的死代码。在wepack中js treeshaking通过UglifyJsPlugin来进行，css中通过purify-CSS来进行。

5. webpack-dev-server 和 http服务器的区别

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。

const {resolve} =require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');
module.exports={
    target:'web',
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            },
            //老版本需要 ， 现在5.0不需要
            //打包其他资源(除了html/js/css)
            // {
            //     exclude:/\.(css|js|html|less)$/,
            //     loader: 'file-loader'
            // }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode:'development',
    //开发服务器 devServer
    //自动编译刷新浏览器
    //特点：只会在内存中编译打包
    //启动devServer  下载 webpack-dev-server
    //要去下载这个东西
    //启动指令：npx webpack serve
    target: 'web',
    devServer:{
        // 5.0不支持下面的用法 换成第二行的 加在entry里也行
        // contentBase:resolve(__dirname,'build'),
        // watchFiles: ['./src/index.html'],
        //启动gzip压缩
        watchFiles: ['./src'],
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true,
        hot:true,
    }
}

6. webpack打包流程

安装webpack cli

npm init 初始化

在index.js中引入相关资源

在html中引入index.js

配置webpack.config.js

使用webpack打包

7. webpack中的 plugin 和 loader 的区别

webpack 中 loader 和 plugin 的区别_tangdou369098655的博客-CSDN博客_webpack的loader和plugin区别

loader，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。

loader 用于加载某些资源文件。
因为 webpack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。

plugin 用于扩展webpack的功能。
目的在于解决loader无法实现的其他事,它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。
————————————————
版权声明：本文为CSDN博主「大青花鱼の」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/halations/article/details/106641278