文章目录
打包构建工具，都是依赖于 node 环境进行开发，底层封装的内容就是 node 里面的读写文件
一、gulp
gulp 是基于流的打包构建工具
1. 流
- 流文件
- 一种文件传输的格式
- 一段一段的文件传输
- 流格式
- 从头到尾的一个过程
- 需要从 源 开始一步一步加工，每一个步骤需要依赖上一步的结果，最终给出一个完整的成品
2. gulp 的作用
- 对于 CSS 文件
- 压缩
- 转码（自动添加前缀）
- 对于 js 文件
- 压缩
- 转码（ES6 转 ES5）
- 对于 html 文件
- 压缩
- 转码（对格式的转换）
- 对于静态资源文件处理
- 对于第三方文件处理
...
3. gulp 的安装、检测和卸载
- 安装
- 是一个JavaScript 相关 工具
- 可以直接使用 npm 进行安装
- 需要安装在你的电脑里，一次安装多次使用
- windows：
npm install --global gulp - mac：
sudo npm install --global gulp
- 检测：
gulp --version - 卸载：
npm uninstall --global gulp
https://www.bilibili.com/video/BV1yA411s72G/?vd_source=dea1988d69fb3a1ffe4ad4329ebe71e8
二、webpack
webpack 是基于 js 文件的打包构建工具，它的五个核心概念如下：
- Entry：指定入口文件，指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图
- Loader：让 Webpack 能够处理非 JavaScript 文件（因为 webpack 自身只能理解 JavaScript），例如Less
- Plugins：插件（Plugins）可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
- Output：输出，知识 webpack 打包后的输出资源输出到哪里去，以及如何命名
- Mode：模式 Mode 指示Webpack 使用相应模式的配置
- development：能让代码本地调试运行的环境
- production：能让代码优化上线运行的环境
1. 打包样式资源
- 通过 css-loader 把 css 资源 变成 comonjs 模块 加载js 中，里面内容是样式字符串，
- 通过 style-loader 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
- 如果遇到 less 资源，会先把 less 转换为 css 再执行上述顺序
2. 打包 html 资源
c
const {resolve} = require('path')
moule.exports = {
entry : './src/index.js',
output:{
filename: 'built.js',
path:resolve(_dirname,'build')
},
module:{
rules:[
// loader 的配置
]
}，
plugins:[
// plugins 的配置
// html-webpack-plugin
// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的 HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template:'./src/index.html'
})
],
mode:'development'
};3. 打包图片资源
js
module:{
rules:[
// loader 的配置
{
test:/\.less$/,
// 要使用多个loader处理用use
use:['style-loader','css-loader','less-loader']
},
{
// 处理图片资源
test:/\.(jpg|png|gif)$/,
// 使用一个loader
// 下载 url-loader，file-loader，npm i url-loader file-loader-D
loader:{
// 图片大小小于 8kb，就会被 base64 处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8*1024,
// 解决：当我们因为 url-loader 默认使用es6 模块解析，而 html-loader引入图片是 commonjs ，解析时就会出现问题： [Object Module]，因此需要关闭 url-loader的es6模块而使用 commonjs解析
esModule: false,
// 输出到指定目录下，其他雷同
outputPath:'images',
// 给图片进行重命名
// [hash:10] 取图片的hash的前10位
// [ext] 取文件原来的扩展名
name: '[hash:10].[ext]'
}
},
{
// 处理 html 图片资源
test:/\.html$/,
// npm i html-loader -D
// 处理 html 文件的img 图片（负责引入 img，从而能被 url-loader进行处理）
loader: 'html-loader'
},
]
}，4. 压缩 html 代码
webpack.config.js
c
const {resolve} = require('path')
moule.exports = {
entry : './src/index.js',
output:{
filename: 'js/built.js',
path:resolve(_dirname,'build')
},
plugins:[
// plugins 的配置
// html-webpack-plugin
// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
// 需求：需要有结构的 HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template:'./src/index.html',
// 压缩 html 代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
mode:'production'
};5. 生产环境基本配置
js
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetWebpackPlugin = require('optimize-css-asset-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义 node.js 环境变量，决定使用 browserslist的哪个环境
process.env.NODE_ENV = 'production';
const commonCssLoader = [
MiniCssExtractPlugin.loader,
'css-loader',
{
// 还需要在 package.json 中定义 browserslist
loader: 'postcss-loader',
options:{
ident:'postcss',
plugins:()=>[
require('postcss-preset-env')()
]
}
}
]
module.exports = {
entry : './src/index.js',
output:{
filename: 'js/built.js',
path:resolve(_dirname,'build')
},
module:{
rules:[
{
test: '/\.css$/',
use: [...commonCssLoader ]
},
{
test: '/\.less$/',
use: [...commonCssLoader ,'less-loader']
},
{
test: '/\.js$/',
exclude:/node_modules/,
loader:'eslint-loader',
option:{
fix:true
}
},
{
test:/\.(jpg|png|gif)/,
loader:'url-loadder',
options:{
limit: 8*1024,
name: '[hash:10].[ext]',
outputPath:'images',
esModule:false
}
},
{
test:/\.html$/,
loader:'hml-loadder',
},
{
exclude:/\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options:{
outputPath:'media'
}
}
]
}，
plugins:[
// plugins 的配置
// mini-css-extract-plugin
new MiniCssExtractPlugin({
filename:'css/built.css'
}),
// 压缩css
new OptimizeCssAssetWebpackPlugin(),
// html-webpack-plugin
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template:'./src/index.html',
// 压缩 html 代码
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
],
mode:'production'
};