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就发生变化