webpack使用指南

webpack本地安装和打包

 1 创建目录
 2 cd 当前目录
 3 npm init -y   // 初始化
 4 npm install webpack webpack-cil --save-dev //本地安装
 4 或者 yarn add webpack webpack-cli --dev //本地安装
 5 ./node_modules/.bin/webpack //调用本地安装的webpack
 ./node_modules/.bin/webpack --version // 查看本地webpack的版本
 5 或者 npx webpack //自动查找webpack、但遇到空格目录就会报错

配置webpack.fonfig.js（开发模式）

这个文件是配置webpack打包模式和一些详细内容的
mode

• production ： 生产模式 - 给用户用的
• development ： 开发模式 - 开发者用的

entry

• ‘./src/index.js’ ：默认入口

output

• path： js生成后的目录地址
• filename： ‘[name].[contenthash].js’ //转移后的JS文字名字，便于添加缓存

HTTP响应头中的Cache-Control

• http缓存-文件缓存-可设置缓存存在多久、可设置缓存时间一年，文件都不用去服务器访问
• 通过’[name].[contenthash].js’哈希的方式，设置文件名，每当内容变了会更新另外一个文件，因为文件名不同会更新HTTP的响应头从而刷新缓存