webpack开发极简指南

github地址：https://github.com/lfzxmw/webpack-

提供import export es6的模块语法支持
通过分析代码中import导入的依赖，把需要的代码加载进来
在webpack中，任何文件都可以通过import导入，只要有对应的loader就可以
在打包过程中，可以通过插件干预打包过程

例如剔除不必要的代码，形成体积更小的项目
webpack是基于node.js的框架

mkdir blog
cd blog
npm init -y //生成的package.json文件所有的配置项都取默认值，不会一条一条去询问了
npm add webpack webpack-cli --dev//添加webpack项目依赖,--dev把webpack相关的依赖添加到开发者依赖里，因为webpack只有在开发时才需要，最后打包的代码里面不需要再使用webpack
npx webpack //执行打包命令 npx可以让我们直接运行node+modules下面安装的库的自带的命令行，而不用写node_modules这一串的相对路径 多出了dist文件

webpack最核心的部分是它的配置文件

1.修改入口的文件，也就是说从哪个文件开始寻找import依赖的路径
还可以配置出口，也就是最后生成的js文件的一些信息
能够通过loader加载不同类型的文件，再通过plugins在打包的过程中对代码进行一些优化或者其它的操作 

2.使用webpack-loader加载css文件

3.几乎所有和webpack有关的依赖，都需要安装在开发者中，--dev,因为打包后我们都不需要它了
npm add --dev style-loader css-loader
对于图片webpack原生加载支持，所以不需要额外安装loader
3.此时的index.html是手写的，非常容易出错，需要同步src下面的文件路径
需要webpack的一个插件，自动生成html文件，不用手动编写代码
html-webpack-plugin
npm add html-webpack-plugin --dev

4.在开发前端项目时，有时会使用新的js特性，但是要兼容低版本浏览器，可以通过babel转译js代码
1）安装babel-loader等
npm add --dev webpack-loader @babel/core @babel/preset-env

5.webpack压缩打包后的js代码
插件 npm add --dev terser-webpack-plugin 

6.webpack热打包并刷新页面
npm add --dev webpack-dev-server
1)package.json添加 这样就能启动webpack-dev-server并自动打开浏览器
"scripts": {
    "start": "webpack-dev-server --open"
  }
npm start启动

7.为了避免缓存，每次都采用不同的名字，随机生成
filename: '[name].[contenthash].js', // 多入口文件打包后的文件名 
// [name]表示入口文件的名字 [contenthash]表示根据文件内容生成一个hash值

8.路径别名
resolve: {
    alias: {
      'utils': path.resolve(__dirname, 'src/utils'), // 配置@指向src目录
    },
  }
  
9.打包分析工具可视化
npm add --dev webpack-bundle-analyzer
new BundleAnalyzerPlugin.BundleAnalyzerPlugin(), // 打包分析插件

git remote add origin https://github.com/lfzxmw/webpack-.git
git remote -v
前提条件： 执行 git push 前，您必须确保已经执行了 git add . 和 git commit -m "..."，否则没有内容可推送
git push -u origin main