工程化包含4个现代化
1.模块化(js的模块化，css的模块化，其他资源的模块化)
2.组件化(可复用的UI结构、样式、行为)
3.规范化(目录结构划分合理，编码规范化，接口规范化，文档规范化，版本控制规范化)
4.自动化(自动化构建，自动化部署，自动化测试)
目前主流前端工程化解决方案：
webpack
设置使用国内镜像
npm config set registry https://registry.npm.taobao.org
本文所使用的环境版本
"webpack": "^5.69.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
一、webpack的基本使用
下面通过一个例子来说明为什么要使用webpack
创建项目空白目录
mkdir wpdemo
cd wpdemo
命令行运行npm init -y,得到初始化包管理配置文件package.json
npm install jquery -S
在wpdemo目录下创建src目录
src目录创建index.js文件和index.html
index.js内容如下
// 使用ES6模块代语法导入jQuery
import $ from 'jquery'
// 验证是否成功导入jQuery
$(function(){
console.log('jQuery已成功导入');
})
index.html内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack demo</title>
<script src="./index.js"></script>
</head>
<body>
</body>
</html>
然后直接用浏览器打开index.html，查看控制台发现报错
import declarations may only appear at top level of a module
提示导入模块错误，原因是当前浏览器还不支持import这种高级语法
怎么办？通过webpack做代码转换来达到兼容的目的
安装webpack相关
npm install webpack webpack-cli --save-dev
配置webpack
创建名为 webpack.config.js 的配置文件，初始化基本配置如下：
module.exports = {
mode:'development'//开发者模式
}
接着修改package.json的scripts节点
"scripts": {
"build_dev": "webpack"
},
在终端执行
npm run build_dev
至此webpack构建已完成，查看wpdemo目录，发现会多了一个dist目录
该目录就是webpack为我们打包构建的目录，所以打包好的资源都在里面了
调整一下src/index.html的js路径为打包好的js路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack demo</title>
<!-- <script src="./index.js"></script> -->
<script src="../dist/main.js"></script>
</head>
<body>
</body>
</html>
最后直接用浏览器打开index.html，查看控制台没有报错
webpack.config.js 的配置文件mode的可选值
development
开发环境
不会对打包的内容进行压缩和优化
打包速度快
production
生产环境
会对打包的内容进行压缩和优化
打包速度慢
webpack中的默认约定
1.默认的源代码入口文件为 src/index.js
2.默认的打包好的输出文件为 dist/main.js
当然可以通过修改配置文件来修改以上配置项
由于 webpack 是基于 node.js 开发出来的打包工具，所以其配置文件支持 node.js 相关语法
调整webpack.config.js内容如下
const path = require('path');//导入 node.js 中用于操作路径的模块
module.exports = {
mode:'development',//开发者模式
//指定打包的入口
entry:path.join(__dirname,'./src/index.js'),
//指定打包的出口
output:{
//输出文件的存放路径
path:path.join(__dirname,'./dist'),
//输出文件的名称
filename:'bundle.js',
},
}
调整src/index.html的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack demo</title>
<!-- <script src="./index.js"></script> -->
<!-- <script src="../dist/main.js"></script> -->
<script src="../dist/bundle.js"></script>
</head>
<body>
</body>
</html>
再次直接用浏览器打开src/index.html查看效果
二、webpack中的插件
通过安装和配置第三方的插件可以拓展 webpack 的能力，从而使webpack更加好用高效
常见插件
webpack-dev-server
类似 node.js 的nodemon工具
每次修改源代码，webpack会自动进行项目的打包构建
html-webpack-plugin
webpck中的html模版引擎
可以通过该插件自定义index.html页面的内容
npm install --save-dev webpack-dev-server
修改package.json中scripts节点的内容如下
"scripts": {
"build_dev": "webpack server"
},
再次运行npm run build_dev命令重新进行项目的打包
打包完成后，我们发现终端并没有马上退出，而是一直监听等待我们的输入
需要注意的是webpack-dev-server的v3版本和v4版本配置上有差异，建议查看最新的官方文档说明
三、webpack 的loader
webpack默认只能打包处理以 .js 后缀名结尾的模块，要处理其他非.js后缀名结尾的模块就需要调用相应的loader加载器
常见loader
css-loader:打包处理.css相关文件
less-loader:打包处理.less相关文件
babel-loader:打包处理 webpack 无法处理的高级 js语法
安装处理css的相关loader
npm i style-loader css-loader -d
调整webpack.config.js的module节点
const path = require('path');//导入 node.js 中用于操作路径的模块
module.exports = {
mode:'development',//开发者模式
//指定打包的入口
entry:path.join(__dirname,'./src/index.js'),
//指定打包的出口
output:{
//输出文件的存放路径
path:path.join(__dirname,'./dist'),
//输出文件的名称
filename:'bundle.js',
},
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
}
调整src/index.js
//加入一行，导入css文件
import './index.css'
src目录新增index.css文件，内容如下
html{
padding: 0;
margin: 0 auto;
}
body{
color:#000000;
}
运行npm run build_dev 查看样式是否加载
处理less文件相关
npm i less less-loader -d
src目录新增index.css文件，内容如下
html{
padding: 0;
margin: 0 auto;
body{
color:#666666;
}
}
调整src/index.js
//import './index.css'
import './index.less'
重新执行npm run build_dev打包查看效果
打包处理样式表中与 url路径相关的文件
npm i url-loader file-loader -d
src/images目录新增bg.png图片
调整index.less
html{
padding: 0;
margin: 0 auto;
body{
color:#666666;
background:url('images/bg.png')
}
}
调整webpack.config.js的module节点
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
{
test: /\.jpg|png|gif$/,
use: 'url-loader',
},
],
},
重新执行npm run build_dev打包查看效果
使用babel-loader处理高级js语法
npm i -d babel-loader @babel/core @babel/preset-env
调整index.js
class Person{
static name = 'Jack';
}
console.log(Person.name);
调整webpack.config.js的module节点
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
],
},
重新执行npm run build_dev打包查看效果
webpack5之后替代各种loader处理资源的方法
webpack5快速入门
webpack5资源处理
webpack5资源模块
四、打包发布
为什么要打包发布？
主要原因
1.开发环境下打包生成的文件存放在内存中，无法直接获取最终的打包文件
2.开发环境下打包生成的文件不会进行代码压缩和性能优化
配置打包发布
"scripts": {
"build_dev": "webpack",
"build": "webpack --mode production"
},
通过 --mode 指定的参数项会覆盖webpack.config.js中的mode选项
npm run build
自动清除dist目录下的旧文件
661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
