前端工程化具体的解决方案
webpack
1 新建项目空白目录,文件夹地址栏cmd运行
npm init -y,初始化包管理配置文件package.json
2 新建src源代码目录
3 src下新建index.html和index.js
4 初始化页面基本的结构
5 运行 npm i jquery -S ,安装jquey
使用 ES6导入语法,导入jquery
import $ from 'jquery'
在项目中安装webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
dependencies 开发和上线都需要用的包
devdependencies 开发用,上线不用
-S 是 --save 的简写
-D 是 --save-dev 的简写
具体看用 -S / -D 查看npm.js中的使用说明
在项目中配置webpack
1 在项目根目录中,创建webpack.config.js的webpack配置文件,并初始化
//node.js中的导出语法,向外导出一个webpack对象
module.exports = {
mode: 'development'
}
//切换为production后会压缩main.js文件
//mode用来指定构建模式,可选值有 development(开发用,打包速度快) 和 production(上线用,体积小)
2 在package.json 的scripts节点下,新增 dev 脚本
"scripts": {
"dev": "webpack"
}
//script节点下的脚本,可以通过 npm run 执行,
3 在终端里运行 npm run dev ,启动webpack进行项目的打包构建
html里src引用 生成的dist下的main.js文件,解决兼容性问题
在webpack 4.x和 5.x版本中,默认约定:
1 默认的打包入口文件为 src -> index.js
2 默认的输出文件路径 dist -> main.js
在webpack.config.js配置文件中,
通过entry节点指定打包的入口,通过output节点指定打包的出口
const path = require('path') //导入node.js中专门操作路径的模块
//__dirname 当前文件存放路径
module.exports = {
entry: path.join(__dirname,'./src/index.js') //打包入口文件的路径
output: {
path: path.join(__dirname,'./dist')
//输出文件的存放路径
filename: 'bundle.js'
//输出文件的名称
}
}
在终端里运行 npm run dev 即可生效
webpack插件
//只能处理以.js结尾的文件
1 webpack-dev-server 会启动一个实时打包的http服务器
安装 npm install webpack-dev-server@3.11.2 -D
修改 package.json 的scripts节点下
"scripts": {
"dev": "webpack serve"
}
再次运行 npm run dev ,重新进行打包
在浏览器中查看 http://localhost:8080/ 查看自动打包效果
2 html-webpack-plugin
自动添加引用
安装 npm install html-webpack-plugin@5.3.2 -D
配置
//1. 导入html插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2. 创建html插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',
//指定原文件的存放路径
filename: 'index.html',
//指定生成文件的存放路径
})
module.exports = {
mode: 'development',
plugins: [htmlPlugin],
//通过plugins节点,使htmlPlugin插件生效
}
4 devServer
devServer: {
open: true, //首次打包成功后自动打开浏览器
host: '127.0.0.1', //指定运行的主机地址
port: 80 //自己设置端口号
}
loader //加载器 打包处理css文件
1 安装 npm i style-loader@3.0.0 css-loader@5.2.6 -D
2 在webpack.config.js的module -> rules 数组中,添加loader规则:
module: { //所有第三方文件模块的匹配规则
rules: [ //文件后缀名的匹配规则
{ test: /\.css$/,
use: ['style-loader','css-loader']}
]
//test表示匹配的文件类型,use表示对应要调用的loader
//use 数组中指定的loader 顺序是固定的
//多个loader的调用顺序是:从后往前调用
}
打包处理less文件
1 安装 npm i less-loader@10.0.1 less@4.1.1 -D
2 在webpack.config.js的module -> rules 数组中,添加loader规则:
module: { //所有第三方文件模块的匹配规则
rules: [ //文件后缀名的匹配规则
{ test: /\.less$/,
use: ['style-loader','css-loader','less-loader']}
]
//test表示匹配的文件类型,use表示对应要调用的loader
//use 数组中指定的loader 顺序是固定的
//多个loader的调用顺序是:从后往前调用
}
打包处理样式表中与url路径相关的文件
1 安装 npm i url-loader@4.1.1 file-loader@6.2.0 -D
2 在webpack.config.js的module -> rules 数组中,添加loader规则:
module: { //所有第三方文件模块的匹配规则
//如果只调用一个loader,传递一个字符串就行,多个loader,必须指定数组
rules: [ //文件后缀名的匹配规则
{ test: /\.jpg|png|gif$/,
use: 'url-loader?limit=22229'}
]
//?之后是loader的参数项
//limit用来指定图片的大小,单位是字节
//只有<=limit大小的图片,才会被转为base64格式的图片
}
打包处理js文件中的高级语法,应用babel-loader解决
//1. 定义了名为info的装饰器
function info(target) {
//2. 为目标添加静态属性info
target.info = 'Person info'
}
//3. 为Person类应用info装饰器
@info
class Person {}
//4. 打印Person的静态属性info
console.log(Person.info);
安装
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在webpack.config.js的module -> rules 数组中,添加loader规则:
//注意:必须使用exclude 指定排除项,因为node_modules 目录下的第三方包不需要被打包
{ test: /\.js$/,use: 'babel-loader',exclude: /node_modules/}
配置 babel-loader
在项目根目录下,创建名为babel.config.js 的配置文件,定义babel的配置项如下:
module.exports = {
//声明babel可用的插件
plugins:[['@babel/plugin-proposal-decorators',{ legacy:true }]]
}
配置 webpack 的打包发布
在package.json 文件的 scripts 节点下,新增 build 命令如下:
"build": "webpack --mode production" //项目发布时,运行build命令
//--model是一个参数项,用来指定webpack的运行模式,production代表生产环境,会对打包生成的文件进行代码压缩和性能优化
//注意:通过 --model 指定的参数项,会覆盖 webpack.config.js 中的model选项
自动清理 dist 文件
clean-webpack-plugin插件 在npm.js中搜索下载使用
source map 信息文件,存贮着位置信息(代码行号位置)
开发环境默认生成的source map,记录的是生成后代码的位置,会导致运行时报错的行数与源代码的行数不一致的问题
在webpack.config.js添加配置
module.exports = {
devtool: 'eval-source-map'
}
在生产环境下,如果省略了 devtool 选项,则最终生成的文件中不包含 source map,防止源代码通过source map 暴露给别有所图的人
只定位行号不暴露源码
将 devtool 的值改为 nosources-source-map
最终结论:
//开发环境用,方便定位错误行号
devtool: 'eval-source-map',
//生产环境用,安全不暴露源码
devtool: 'nosources-source-map'
建议大家使用 @ 表示src 源代码目录,从外往里查找;不要使用 ../ 从里往外查找
需要在webpack.config.js添加配置
module.exports = {
resolve: {
alias: {
//告诉webpack,程序员写的代码中, @ 符号表示src这一层目录
'@':path.join(__dirname,'./src/')
}
}
}