实际前端开发

  1. 模块化(js)
  2. 组件化(ui)
  3. 规范化
  4. 自动化(构建,部署,自动化测试)

初识webpack

  • 功能: 代码压缩混淆, 处理浏览器JavaScript的兼容性, 性能优化
  • 定义: 解决前端工程化的具体解决方案

初始化配置

  • npm install init -y 初始化package.json
  • -S –save, 将下载的包名和版本号 装到dependencies下(开发和部署)
  • -D –save-dev, 将包记录到devDependencies(只在开发过程中)
  • 安装webpack npm i webpack@5.42.1 webpack-cli@4.7.2 -D
  • 在根目录下配置webpack.config.js 配置当前的环境mode 有两种选择 development和production
  • 运行webpack 在package.json 下的scripts中配置webpack命令
  • 要想实现webpack压缩功能将webpack.config.js模式修改为production

entry指定打包入口

  • 表示要处理的那个文件
  • 使用path模块path.join(__dirname, '')

output指定打包出口

  • 数据类型对象 path 指定存放的目录 filename 生成的文件名

安装插件

  • 安装webpack-dev-server@3.11.2 -D 实现实时自动打包
  • 将打包的文件生成到内存中, 不是物理磁盘中
  • 使用时将srcipt中的地址改为根目录/使用地址http://localhost:8080访问

安装html-webpack-plugin

  • npm i html-webpack-plugin@5.3.2 -D
  • 把指定的页面加入复制到根目录, 内存中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path')
// 导入html-webpack-plugin
const HtmlPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const html = new HtmlPlugin({
// 指定复制的页面
template: './src/index.html',
// 指定复制出来的文件名和存档路径
filename: './index.html'
})
module.exports = {
mode: 'development', //productions,
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'main.js'
},
plugins: [html]
}

devSever 节点

  • 自动打开生成的网站, 展示网页效果
1
2
3
4
5
devServer: {
open: true,
port: 9090, //自定义端口号
host: '127.0.0.1' // 指定打开地址
}

loader 加载器

  • 处理非.js文件
  • 打包处理css文件 npm i style-loader@3.0.0 css-loader@5.2.6 -D
  • 当webpack发现某个文件处理不了的时候, 活查找webpack.confing.js这个配置文件中的module.rules数组中, 是否配置了对象的loader加载器
  • 打包处理less文件 npm i less-loader@10.0.1 less@4.1.1 -D
  • 打包图片的路径 npm i url-loader@4.1.1 file-loader@6.2.0 -D 可传递参数 limit 加上参数<=limit大小的图片 才会被转换成base64, 单位字节
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: 'url-loader'
}
]
}
  • 使用babel-loader对js进行打包处理, 处理webpack无法处理的js高级语法 npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D 在根目录下创建一个babel.config.js文件 将插件配置写入 [["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties"]]
1
2
3
4
5
6
7
module.exports = {
plugins: [
["@babel/plugin-proposal-decorators", {
"legacy": true
}]
]
}

配置build命令

  • 创建一个scripts 脚本 webpack --mode production
  • 将文件统一放到某个文件下 js配置path 图片在url中以地址方式传递outputPath参数
  • 使用clean-webpack-plugin插件将原来的dist文件先清理在生成

Source Map

  • 存储着原来的位置信息
  • 定位源代码的位置, 在配置文件中加入devtool:'evel-source-map' 开发环境下
  • 在发布项目时, 能定位行号, 但是不暴露源代码 nosources-source-map 生产环境下
  • 可以定位和显示源代码 使用source-map
  • @表示src源代码目录
1
2
3
4
5
resolve: {
alias: {
"@": path.join(__dirname, './src/')
}
}

webpack.config.js最终配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const path = require('path')
// 导入html-webpack-plugin
const HtmlPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const html = new HtmlPlugin({
// 指定复制的页面
template: './src/index.html',
// 指定复制出来的文件名和存档路径
filename: './index.html'
})
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
devtool: 'nosources-source-map', // eval-source-map
mode: 'development', //productions,
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/main.js'
},
plugins: [html, new CleanWebpackPlugin()],
devServer: {
open: true,
port: 9090, //自定义端口号
host: '127.0.0.1' // 指定打开地址
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: 'url-loader?limit=447&outputPath=images'
},
// 处理高级的js语法
{
test: /\.js$/,
use: 'babel-loader',
exclude: '/node_modules/'
}
]
},
resolve: {
alias: {
"@": path.join(__dirname, './src/')
}
}
}