关于webpack打包文件，0基础前端开发

]

};

##### [](

)关于webpack的插件

需要下载`npm install -D html-webpack-plugin`  

_`-D`表示开发依赖，`-S`表示生产依赖_

1.  html-webpack-plugin：简单创建 HTML 文件，用于服务器访问

const htmlWebpackPlugin = require(‘html-webpack-plugin’);

plugins: [

new htmlWebpackPlugin({             //创建html文件

       filename: 'index.html',         //生成的文件名

       template: './src/index.html'    //借鉴的html

   })

]

2.  MiniCssExtractPlugin：为每个引入 CSS 的 JS 文件创建一个 CSS 文件

##### [](

)webpack配置module

1.  css-loader：读取css文件

2.  style-loader：读取到的css模块注入DOM，配合css-loader一起使用

3.  babel-loader：将es6 -> es5

> babel-core：将js代码分析成AST。

4.  url-loader：将文件转换为base64，比如将图片转为base64编码

react使用的语法是jsx，所以浏览器不识别，则需要babel来转为浏览器识别的语法，就需要配置babel  

js 需要下载`npm i -D babel-core ,babel-loader, babel-preset-react`  

css 需要下载`npm i -D style-loader, css-loader`  

img 需要下载`npm i -D file-loader` ，图片变为打包  

img也可以使用`npm install -D url-loader`，图片变为base64编码，可以设置limit来限制小图片进行base64编码，大图片进行文件打包。

module:{

    rules:[

        {

            test: //.js$/, //匹配js文件

            use: [{

                loader: 'babel-loader',//引用babel-loader

                options: { //配置babel

                    presets: ['react']

                }

            }

            ]

        },

        {

            test: //.css$/, //匹配css文件

            use: ['style-loader','css-loader'] 

        },

        {

            test: //.(jpg | png | gif | jpeg $/, //匹配图片

            use: ['file-loader'] 

        }

    ]

}

##### [](

)配置devServer

### 最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于**前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等**

>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**

![](https://s2.51cto.com/images/20210925/1632502499443945.jpg)

**前端视频资料：**
![](https://s2.51cto.com/images/20210925/1632502500966520.jpg)