A little front-end knowledge every day 01 - Webpack

1. What is front-end engineering

1. Modularization: including modularization of css, js, and resources

2. Componentization: encapsulate components, reuse ui, css, js

3. Standardization: directory structure, coding, interface, documentation and git branch

4. Automation: automated construction, deployment, and testing

2. Webpack quick start

webpack is currently one of the most popular solutions for front-end engineering
Features: modular development, code compression confusion, compatibility, performance optimization, etc.

How to create a simple webpack project?

1.新建项目目录，npm init –y，初始化包管理配置文件 package.json
2.新建 src 源代码目录
3.新建 src -> index.html 首页和 src -> index.js 文件
4.npm install webpack webpack-cli -D
5.在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
6.在 package.json 的 scripts 节点下，新增 dev 脚本
7. 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

insert image description here

How to configure webpack?

1.mode 的可选值：development和production
2. webpack.config.js 文件的作用：webpack.config.js 是 webpack 的配置文件，打包之前，会先读取此文件的配置
3.  webpack 中的默认约定：默认的打包入口文件为 src -> index.js，默认的输出文件路径为 dist -> main.js
4.  自定义打包的入口与出口：通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

insert image description here

3. Webpack plugin

1. webpack-dev-server (hot update): Whenever the source code is modified, webpack will automatically package and build the project

npm install webpack-dev-server
修改 package.json
修改 webpack.config.js

insert image description here

2.html-webpack-plug (customized index.html page): copy the index.html home page in the src directory to the root directory of the project

npm install html-webpack-plugin

insert image description here

4. Webpack Loader

By default, webpack can only process js, and others need to call the loader to process, and the order of loader calls goes forward

1.css-loader: package and process css

npm i style-loader css-loader -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则

insert image description here

2.less-loader: package and process less

npm i less-loader less -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则

insert image description here

3.url-loader: package processing image

npm i url-loader file-loader -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则

insert image description here

4. babel-loader: Package processing advanced JS that webpack cannot handle

npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项

	module.exports = {
    
    
		plugins:[['@babel/plugin-proposal-decorators',{
    
     legacy: true }]]
	}

insert image description here

Five, Webpack packaging

Why package and publish?

开发环境下，打包生成的文件存在内存中，无法获取到最终打包生成的文件
开发环境下，打包生成的文件不会进行代码压缩和性能优化

Configure the packaging and publishing of webpack

在 package.json 文件的 scripts 节点下，新增 build 命令

insert image description here
Generate file js and image folders uniformly

在 webpack.config.js 配置文件的 output 节点中
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项

insert image description here

Automatically clean up the dist directory

安装并配置 clean-webpack-plugin

insert image description here

6. Source Map

What is Source Map

Source Map 就是一个信息文件，里面储存着代码位置信息

Solve the default Source Map

在 webpack.config.js 中添加如下的配置

insert image description here
Source Map in production environment

定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为nosources-source-map