webpack知识讲解

一，概览

1.前端静态模块化打包器

2.把所有文件 经过 webpack 处理,生成 html,css,图片,js

二，打包工具

1.sea.js

2.require.js

3.gulp

4.grunt

5.webpack依赖webpack.config.js打包

三，输出 （output）

path:__dirname+"/dist"
//(__dirname当前目录)

filename (文件名称)

四，模式 （mode）

1.development 开发模式

2.production 产品模式

五，加载器 （loader）

1.处理非js文件

module:{
   rules:[
      {"test":/\.css/,loader:["style-loader","css-loader"]}
  ]
}

style-loader 把css加载到style标签

css-loader 处理.css文件

六，插件 （plugins）

1.在webpack运行过程做打包,压缩,清理

// 01 安装
npm i html-webpack-plugin
// 02 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 03 使用
plugins:[
   new HtmlWebpackPlugin({template:"./public/index.html"})
]

html-webpack-plugin 把模板html 插件打包好的js 拷贝到 dist目录

七，本地服务器 （devServer）

1.数据

devSever:{
   host:"域名",
   port:"8080",
  hot:"热更新",
  open:"是否自动打开浏览器",
  proxy:{},//代理
}

2.调用

package.json
"script":{
    "serve":"webpack serve"
}

3.cmd中运行

npm  run serve

八，浏览器缓存的机制，提高了2次加载的速度

浏览器get 请求会缓存
如果浏览器第二次请求的地址在缓存中用就使用缓
web hash缓存
如果文件没有发生修改,使用一样名称
如果文件发送修改了,更改生成的文件名
没有发生更改的文件:缓存
修改的文件:更新

九，hash命名

1.hash （文件内容发生变化,hash变化）

2.contentHash ,内容发生变化hash变化

3.chunckHash （入口有很多个,哪个入口发送变化,hash变化）