webpack

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

打包工具

sea.js
require.js
gulp
grunt
webpack 依赖 webpack.config.js 打包
入口—entry
输出—output

path:__dirname+‘/dist’ （__dirname 当前目录）
filename 文件名称
模式—mode

development 开发模式
production 产品模式
加载器—loader

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

在webpack运行过程做打包，压缩，处理

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

安装 npm i html-webpack-plugin

导入 const HtmlWebpackPlugin = require(“html-webpack”)

使用 plugins:[new HtmlWebpackPlugin({“template”:“./public/index.html”})]

本地服务器—devServer

devServer:{host:“域名”,port:8080,hot:true,open:true,proxy:{}}
“scripts”:{“serve”:“webpack serve”} （package.json）
npm run serve
hash命名

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