webpack知识点

1.webpack概念

前端静态模块化打包器
把所有文件 经过webpack处理，生成html，css，图片，js

2.打包工具

1.sea.js

2.require.js

3.gulp

4.grunt

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

3.入口  entry

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点

4.输出 

path:__dirname+"/dist"
（__dirname当前目录）

filenane
文件名称

output:{
        //__dirname 指当前目录 两个下划线
        //路径
        path:__dirname+'/dist',
        //打包好的js文件名称
        filename:'main.js'
    },

5.模式 moude

模式分为两种：

一.development   开发模式
二.production   产品模式

6.加载器 loader

处理非js文件
module:{
  rules:[
    {"test":/\.css/,loader:["style-loader","css-loader"]}
  ]
}
style-loader 把css加载到style标签
css-loader 处理.css文件

7.插件 plugins

在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

8.本地服务器 devServe

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

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

npm run serve

9.浏览器的缓存机制

浏览器get请求会缓存
如果浏览器第二次请求的地址在缓存中就使用缓存

web hash缓存
如果文件没有发生修改，使用一样名称
如果文件发生修改了，更改生成的文件名

没有发生更改的文件：缓存
修改的文件：更新

10.hash命名

hash                             文件内容发生变化，hash变化
contentHash                内容发生变化 hash变化
chunckHash                入口有很多歌，哪个入口发生变化，hash变化