Webpack(上)

Webpack（上）

前端框架Webpack，前端最重要的工具之一。
CRM法学webpack,通过8个任务学会webpack。
webpack文档、npm文档

工具
webpack@4 和 webpack-dev-server本地预览
本地预览httpserver没有webpack-dev-server功能强,parcel也能本地预览但与webpack不配套,所以只能用webpack-dev-server。

webpack这么多插件怎么学？
重要的"不是用什么"，而是"怎么知道用什么"，要学会搜+CRM法。
🔍英文关键词+CRM法

框架

Webpack功能
转译代码(ES6转为ES5，SCSS转为css)
构建build
代码压缩
代码分析

安装依赖

终端:yarn add webpack@4 webpack-cli@3 --dev //webpack-cli用于在命令行中运行webpack

目标一. 用webpack转译JS

1.调用webpack
(1)新建文件webpack-demo并用vscode打开，新建终端：

npm init -y //创建package.json
yarn add webpack@4 webpack-cli@3 --dev //安装它的2个依赖
//会多个node_modules的目录。由于是本地安装，不是全局安装,文件在node_modules里的.bin目录下

(2)新建目录src、新建index.js、新建x.js

import x from './x.js'
console.log(x)
x.js
export default 'fuck'

(3)运行: 由于是本地安装，运行时只能用绝对路径调用webpack

npx webpack //自动但可能不稳定
//或者./node_modules/.bin/webpack --version // 手动调用本地webpack

调用后会默认把index.js转变为 main.js。
会分析js代码，然后将代码变成IE或低版本浏览器可以用的js。

2.初始化webpack.config.js
去除警告：文档

(1)新建文件webpack.config.js，打开文档复制粘贴

const path = require('path');

module.exports = {
   
    mode: 'development' //'production'
};

会设置main.js为开发者模式,方便自己阅读或者debug调试。如果是正在开发中可以设置为development，如果你正要发布可以设置为production用户模式，给用户看的，内容最少。
3.重新运行npx webpack

目标二. 理解文件名中hash的用途

附加知识
HTTP响应头中的Cache-Control

1.webpack配置entry和output(入口和出口)
还是webpack.config.js文件，复制文档

const path = require('path');

module.exports = {
   
    mode: 'development',
    entry: './src/index.js',//你的入口文件
    output: {
   
        filename: 'main.js',//'index.js'
    },
};

entry是你的入口文件名。index.js转义后会默认生成main.js，output是转义后的文件名(默认是main.js)，可与入口名保持一致。
重新运行npx webpack

2.更多配置
🔍webpack filename hash

filename: '[name].[contenthash].js',

这涉及到HTTP缓存的意义
当你访问百度时，它会给你返回几个文件,当你第2次访问时它会重新再加载一遍。

设置缓存头的好处
比如在1.css、2.css、1.js、2.js缓存头内设置一年内只需下载1次缓存，且一年内不会修改。
当你第2次访问baidu.com时就只需要下载index.html，然后它会从内存里得到1.css、2.css…

每次修改后再次发布webpack，webpack就会重新生成个新的文件。浏览器一看请求(文件名)不一样就会立刻请求新的文件，放弃之前的缓存用新的缓存,从而实现更新。
利用webpack，对文件内容做一个哈希 md5(在线解密加密)，webpack就会自动做这件事情。

问题2：为什么首页不缓存呢？
因为首页需要通知浏览器给其它文件设置缓存的入口。

问题3： 每次修改都会得到新的，那dist里的文件不是越来越多吗？
它会根据内容产生哈希，这样只要内容变了，就会得到新的文件。
方法: 每次更新时删掉旧的，或者怕忘记可以添加到package.json里。
npx webpack可简写成webpack。

package.json
"scripts":