文章目录
来源博客:【Harryの心阁】
实际前端开发
- 模块化(js)
- 组件化(ui)
- 规范化
- 自动化(构建,部署,自动化测试)
初识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
- 把指定的页面加入复制到根目录, 内存中
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 节点
- 自动打开生成的网站, 展示网页效果
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, 单位字节
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"]]
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源代码目录
resolve: {
alias: {
"@": path.join(__dirname, './src/')
}
}
webpack.config.js最终配置
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/')
}
}
}