一. 前备知识 - path
1. path
2. path的API
const path1 = '/abc/cba'
const path2 = '../wxy/kobe/james.js'
path.join(path1,path2) // \abc\wxy\kobe\james.js
// /abc.text已经是一个绝对路径了
path.resolve('./abc/cba','./wxy/kobe','/abc.text') // F:\abc.text
// 处理完给定的path,还没有生成绝对路径，则和当前目录进行拼接
path.resolve('./abc/cba','../wxy/kobe','./abc.text') // F:\test_webpack\01_test\abc\wxy\kobe\abc.text
//如果没有传参，则返回当前工作目录的绝对路径
path.resolve() // F:\test_webpack\01_test
二. webpack
1.webpack安装
2.webpack基本打包过程
在目录下执行webpack进行打包；默认的入口文件是src/index.js，如果没有就报错；打包后生成dist文件夹，里面存放打包后的文件
（1）创建package.json
npm init
（2）安装局部的webpack
npm install webpack webpack-cli -D
（3）打包命令(webpack默认把src/index.js作为入口文件)
npx webpack // src/index -> dist/main.js
//可以通过配置来指定入口文件和出口
npx webpack --entry ./src/main.js --output-filename buile.js --output-path ./build
(4)可以通过配置文件webpack.config.js来配置webpack
const path = require("path")
console.log(__dirname)
// 定义了入口文件和打包后的目录名称和文件名称
module.exports = {
entry: "./src/main.js",
output:{
filename: "buile.js",
path: path.resolve(__dirname,"./build")
}
}
运行 npx webpack
(5)修改webpack默认的配置文件
npx webpack --config wk.config.js
(6)因为配置命令太长可以在package.json里面的scripts里面配置命令
"scripts": {
"build": "webpack --config wk.config.js"
},
3. loader
（1）使用loader方式
// 内联
// 可以在 import 语句或任何与 "import" 方法同等的引用方式中指定 loader。使用 ! 将资源中的 loader 分开。
import Styles from 'style-loader!css-loader?modules!./styles.css';
// loader 从右到左（或从下到上）地执行
// 从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'postcss-loader' },
{ loader: 'sass-loader' },
],
},
],
},
};
（2）css处理
style-loader 把css-loader解析后的css以<style>标签的样式引入
css-loader 解析css文件
less-loader 处理less文件
postcss-loader 帮助我们进行一些css的转化和适配，比如自动添加浏览器前缀，css样式的重置； (插件：autoprefixer，postcss-preset-env）
（3）图片处理
asset/inline : 将图片进行base64的编码，并将编码后的base64放到打包后的js文件中（缺点：少网络请求，造成js非常大，下载js文件本身消耗的时间长，造成js代码的下载和解析执行时间过长）
asset/resource : 打包两张图片，并且这两张图片有hash地址，将hash地址设在src或者url中（缺点：多发了图片加载的网络请求）
注：对于小一点的图片，可以进行base64打包；对于大一点的图片，单独的图片打包，形成url地址，单独的请求这个url地址
asset: 设置大小来打包图片
打包图片重命名：
可以在output里面设置： assertModuleFilename: 'abc.png'
也可以
[hash:8]： 取hash值的前8位
（4）babel
将ES6的语法转换成ES5的语法
或者直接安装 npm install babel-loader -D
babel也有自己的预设：@babel/preset-env
（5）处理vue
安装vue-loader,使用VueLoaderPlugin
（6）webpack文件路径解析和配置
4.插件plugin
（1）定义
（2）CleanWebpackPlugin（ 修改配置，重新打包时，清空dist文件夹）
// 安装
npm install clean-webpack-plugin -D
// 配置
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins:[
new CleanWebpackPlugin()
]
(3)HtmlWebpackPlugin (生成打包后的html文件，有默认模版，也可以自定义模版)
// 安装
npm install html-webpack-plugin -D
// 配置
const { HtmlWebpackPlugin } = require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugin({
title: 'webpack项目'，
template: './public/index.html' // 自定义模版
})
]
（4）DefinePlugin（注入全局变量；默认注入process.env.NODE_ENV）
里面会被当成js代码执行
（5）Mode配置
5.开启本地服务器
（1）为什么使用
（2）webpack-dev-server开启本地服务配置
// 安装
npm install webpack-dev-server -D
// 配置命令
"scripts": {
"serve": "webpack serve --config wk.config.js"
},
(3)热模块更新Hot Module Replacement
开启HMR:
（4）host配置
devserver: {
host: '0.0.0', // 主机
port: 8888, // 端口
open: true, //自动打开本地服务器地址
compress: true //
}
（5）合并公共配置 webpack-merge
