Webpack

webpack概念：

是一个静态化前端打包器，可以把复杂的依赖关系 打包为一个或者多个文件，最终生成浏览器可以识别的资源 html css 图片 js

webpack.config.js:

配置webpack
const path = require =("path")

emodlues.exports={
entry:"./src/main/js"
output:{

path:path .resolve(__dirname,"dist")
filename:"bundles.js"

}

mode:"development"

}

运行

1，npmx webpack

2,package.json :

"scripts"{

"serve":"webpack"

}

插件

处理文件 比如压缩 清理操作等

1. vue插件
   vue-loader
2. js优化
   terser-webpack-plugin
3. css优化
   css-minimizer-webpack-plugin
4. 抽出插件
   mini-css-extract-plugin
5. 处理html模板工具
   html-webpack-plugin
6. 清理插件
   clean-webpack-plugin
7. 使用插件

     plugins: [

   ]

 

loader处理器

处理文件（转换文件） 默认只支持js和json

file-loader 处理文件地址

url-loader 处理文件地址 把小图片 转换为base64 省一次网络请求

css-loader 处理css

style-loader  把css加载到style标签

命名

[hash:7] 哈希值

哈希命令 有效控制缓存与更新 hash
contentHash和内容有关
chunkHash和入口有关

[name] 当前文件名

[ext] 后缀名

本地服务器 webpack-dev-server

proxy 代理
hot  热更新
host 域名
port 端口号
open 自动打开浏览器
package.json
script：{ “serve”：“webpack serve”}

按需下载

import（“jquery”）.then(({default:$})=>{

})

webpack魔法注释

/*webpackChunkName:"jquery",webpackPrefetch:true*/
加载的文件名，预加载（有网络空闲提前加载）

devtool

当代码出错如何报错 eval

别名

resolve:{

alias:{

"@":path.resolve( __dirname,"src")

}

}

把css抽出单独文件

min-css-extract-plugin

把css优化 压缩

optimize-css-assets-webpack-plugin

不用vue脚手架 创建一个项目

处理.vue
vue-loader

编译template
vue-template-complier

热更新
vue-hot-reload-api

处理样式
vue-style-loader

vue
{text:/\.vue.use:["vue-loader"]}
const {VueLoaderPlugin} from  'vue-loader'plugins:[new VueLoaderPlugin()]

处理Scss

npm  i sass sass-loader -D
{test:/\.scss/ ,use:["style-loader","css-loader","sass-loader"]}