关于webpack打包文件

webpack.config.js

const path = require(‘path’);

module.exports = {

context: path.resolve(_dirname, ‘app’);

entry: ‘./src/app.js’, //输出路径

output: {

path: path.resolve(__dirname, ‘dist’), //输出路径,__dirname表示为当前文件的路径下

filename: “main.js”

},

mode: ‘development’,

plugins: [ //配置plugins

]，

module: [ //配置loader

]

};

关于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’]

}

]

}

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。