webpack知识点+1+1+1

1.什么是webpack？
概览:前端的静态模块化打包器
作用:把所有的文件经过webpack处理,生成html,css,图片,js

2. 使用webpack（大佬无需看的部分）
   创建一个文件
   切换到创建的文件

   初始化文件

  安装webpack 以及webpack脚手架

  打开创建的文件并创建一下文件（步骤过于简单大佬散开散开）
  创建一个名为webpack.config.js(webpack的配置文件)
  
  在webpack.confin.js 写入以下数据

   entry:{}//入口 ，webpack 从哪个文件开始运行
   output:{path:{}//目录  filename:{}//打包好后js的名称}//出口 导出到的文件和打包好的js文件名称
   mode 模式 //产品模式 production 和开发模式devlopment
    

  header.js中写入以下内容（大佬略过）

index.js中写入这些（同上）

 在package.json中添加

添加完成后可以在控制台输入 npm run build 运行我们的webpack

3 引用插件 （最刺激地方来了）
新建一个base.css
 
在base.css中输入，方便之后的调用

在index.js中导入我们写的css
+
在header.js中使用我们写的样式

如果我们此时运行npm run build 命令
会提示我们没有css的loader的引用

什么是css的loader?
可以理解为是一个可以将css样式打包的插件

在我们创建的文件夹中下载 css-loader( 处理.css文件) 以及style-loader(css加载到style标签)

此时再运行npm run build (完美运行)

并且再次安装一个 npm i html-webpack-plugin -D   插件

再webpack中导入plugin并使用plugin

再次运行npm run build  会在浏览器中看到这样的效果

本地服务器
安装 npm i webpack-dev-server -D 

并在packag.json中 加入 “serve”:webpack serve

在webpack.config.js 中添加
hot：热更新会随着我们改变参数而实时的改变

此时我们就可以使用 npm run serve 来运行了

其运行结果和npm run build 相同

明天跟新图片的缓存和清除，更好的加快浏览器二次打开的速度