# webpack工程化
# 疑问1 index.js没有引入a.js 会把a.js打包进去吗? -> 不会
# 核心概念 webpack它是模块打包 模块编译的工具
# 1.webpack 基于node.js
# 安装指定版本
# npm install [email protected] [email protected] -D
# 关于启动
# 方式1 执行npx webpack 启动webpack执行构建mode=production 生产环境 (默认开启代码压缩插件)
# 方式2 在package.json 的 scripts 里面添加 "dev":"webpack" 执行 npm run dev
# webpack4.x 提出一个概念 0配置 0启动. 这个功能基本是不可用的状态 所以还是要自己去配置webpack
entry 入口
output 出口
mode 模式
chunk 指bundle文件里的代码片段,由一个模块或者多个模块构成 (一个入口 一个chunk)
bundle文件 : 资源经过webpack流程解析编译后最终输出的成果文件 (dist文件夹里面的文件就是 bundle文件)
module : 写入各种loader
loader 它是模块解析器 让webpack处理其他更多文件类型
//loader webpack默认只支持 .js .json类型的模块
plugin 插件让其可以控制构建流程
devtool: "sourcemap": 源代码与打包后的代码的关系映射
webpack-dev-serve
# ... https://www.bilibili.com/video/BV1T54y177Y4?p=64
#### 一般情况下less-loader postcss-loader 版本过高问题
npm uninstall less-loader 卸载高版本
npm install [email protected] 下载低版本
npm install [email protected] [email protected] -D
# dev-zs 正式开发
# 需考虑的问题
# 1.启新项目
# 2.单个前端,还是团伙
# 3.安装依赖问题
1)创建.npmrc 指向某个源
# 4.样式 静态资源(图片 第三方字体) es6+ (vue react ts)
# 5.样式:借助css-loader处理css的语法 借助style-loader使用css
# 6.postcss(处理编译css --如css3 可补充前缀) babel(处理编译js)
1)在package.json中配置browserslist(浏览器集合) 兼容补齐浏览器版本
2)安装css压缩工具 npm install cssnano -D (去掉换行符 去掉空格)
3)css样式提取 提取到单独的模块 模块化 在webpack-zsConfig中配置 plugins
关于插件:先安装 在引入 再配置 注意替换style-loader
npm install [email protected] -D
# 7.自定义loader的实现 --> 如何编写一个loader
loader本质上就是一个函数
# 8.处理图片 file-loader url-loader
改变图片的存储位置 : 使用 url-loaaer
改变
npm install file-loader -D
# 9.url-loader ->官方推荐 完全包含file-loader
1)如果图片小 可以把图片转成base64 减少了一次请求
# 10 静态资源 在dist文件夹自动生成 默认 index.html
npm install html-webpack-plugin@3 -D
# 11 引入阿里字体图标 https://iconfont.cn/webfont?spm=a313x.7781069.1998910419.23&puhui=1#!/webfont/index
下载到本地 按需要引入
使用file-loader按照文件配置 注意引入 如果node版本过低 需要注意加上 {esModule: false, //{}
# 12 !import 关于webpack文件指纹策略 hash chunkhash contenthash
1) hash策略 是以项目为单位的,项目内容改变,则会生成新的hash.内容不变则hash不变
2) chunkhash 以生成的chunk文件为单位.当一个文件的内容改变,则整个chunk组的模块hash都会改变 (使用同hash一致)
3) contenthash (小范围 ) 以自身内容为单位 css-推荐使用contenthash
# 13 每次打包前 都自动清空dist文件
npm install clean-webpack-plugin -D
# 14多页面打包通用方案 https://www.bilibili.com/video/BV1T54y177Y4?p=66 2:02:00
详见: webpack.mpa.config.js
1)npm install glob -D
# 15 webpack-dev-server 神器 本地启动服务的依赖 热更新 打开窗口
npm install [email protected] -D
# 16 开发项目模式
//非常符合 砖 的概念
npm install express -D 启node服务 mock数据 . 见server.js
# 17 babel工具 * !import
babel编译处理js的 对js的语法支持的非常好 默认就支持js和json模块
//考虑到目标浏览器环境
//flow
//jsx => js
//ts => js
//es6+ => ES5
//polyfill 垫片(包含esma新特性的库)
npm install babel-loader @babel/core -D
npm install @babel/preset-env -D
npm install @babel/polyfill -S //垫片
=======================webapck.config.js=============================================
const path = require("path")
const miniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin") //每次打包 都清空dist
const {
CleanWebpackPlugin
} = require("clean-webpack-plugin")
//默认配置
module.exports = {
entry: "./src/index.js", //入口 单页面应用 (只有一个入口) 多页面应用(指多入口)
// entry: {
// index: "./src/index.js",
// list: "./src/list.js"
// },
output: {
//输出的文件存放的目录,必须是绝对路径
path: path.resolve(__dirname, "./dist"),
//输出的文件名称
filename: "[name]-[hash:6].js", //文件名后面加上hash . 使用 :6 取hash的前六位
},
mode: "development", //指定开发模式 == > development | prodution(发布模式)
resolveLoader: {
modules: ["node_modules", "./myLoaders"], //如果node_modules没有 就去 myLoaders找
},
module: {
rules: [{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}, {
test: /\.less$/,
use: [miniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader', ], // compiles Less to CSS //使用postcss插件 ->miniCssExtractPlugin.loader替换style-loader
}, {
test: /\.(png|jpe?g|jif|webp)$/,
// loader: "file-loader", //url-loader完全包含 file-loader . 可直接替换
loader: "url-loader", //把图片转成base64 减少了一次请求
options: {
name: "[name].[ext]", //[ext] 后缀占位符
publicPath: "../images", // 设置应用路径
outputPath: "images", //(设置打包输出路径)改变图片的存储位置 -->引发css中引入图片的路径有问题 -分析出->补齐publicPath解决
esModule: false, //
limit: 1024 * 3 //限制 图片大于3k 不会转base64
}
}, {
test: /\.(woff|woff2|svg|eot)$/, //处理字体图标
loader: "file-loader", //把图片转成base64 减少了一次请求
options: {
name: "[name].[ext]", //[ext] 后缀占位符
publicPath: "../",
esModule: false, //
}
}, {
test: /\.js$/, //检测到js模块 交给babel-loader处理 处理ES6 7
use: {
loader: "babel-loader",
}
}]
},
devtool: "sourcemap", //源代码与打包后的代码的关系映射
devServer: {
contentBase: "./dist",
port: 8089,
open: true,
proxy: {
"/api": {
target: "http://localhost:9092/"
}
}
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
chunks: ["main"] //多入口配置 对应chunk
}),
// new HtmlWebpackPlugin({
// template: "./src/list.html",
// filename: "list.html",
// chunks: ["list"]
// }),
new CleanWebpackPlugin(), //每次打包 都删除dist
new miniCssExtractPlugin({ //此插件将css打包成独立的css文件
filename: "css/[name]-[chunkhash:8].css",
})
]
};
```
================= .babelrc 配置 ===================
```
{
"presets": [
["@babel/preset-env", {
"targets": {
//设置目标浏览器环境
"edge": "17",
"chrome": "67"
},
"corejs": 2, //不推荐使用polyfill
"useBuiltIns": "usage" // (entry usage false) 按需加载
}]
] //使用@babel/preset-env进行js语法编译
}
```