webpack

webpack

浅浅记录一下有关webpack的知识点
如果能帮到你就更好啦~
祝福看到的你今天也有好心情！

1. 引入

首先先来看看为什么要引入webpack这个东西呢

先来看一个案例：
包括：index.html index.less index.js
涉及的问题：

• 直接引入less文件无法直接使用 （需要通过某种工具将less转化为css）
• 在js文件中使用es6模块语法引入jquery也无法正常使用 （需要某种工具转化为可识别的js）

在这里引入jquery的方式：

• 首先需要初始化项目 通过npm init生成package.json文件
• 然后再终端通过npm i jquery
• 在js文件中直接引入
  import $ from ‘jquery’;
• 使用：
  $(’.title’).click(() => {
  })
  要维护这一个个转换工具很麻烦
  所以就有了构建工具(包含所有的工具）的出现

那么怎么构建呢？

具体构建：

• 一个入口文件：index.js
• 形成依赖关系树
• 形成chunk代码块（打包处理）
• 最后输出新的静态资源：bundle

2. webpack5个核心概念

• Entry

  Entry入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

• Output
  打包后的资源budles输出到哪里去以及如何命名

• Loader
  小小翻译官~~
  webpack只能处理JavaScript文件，有了Loader，webpack就可以处理非JavaScript文件（css文件啥的…）啦

• plugins
  除了翻译还想实现点压缩等等功能就需要这个啦
  插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

• Mode

两种模式 开发和生产
生产模式比开发处理得会更细致

选项	描述	特点
develpment（开发）	会将DefinePlugin中process.env.NODE_ENV的值设置为development。 启动的插件：NamedChunksPlugin和NamedModulesPlugin。	代码本地调试运行的环境
production（生产）	会将DefinePlugin中process.env.NODE_ENV的值设置为production。 启动的插件：FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和TerserPlugin。	代码优化上线运行的环境

3.简单小应用

Steps：

• 创建新文件夹
• npm init
• npm i webpack webpack-cli -g
• npm i webpack webpack-cli -D
  (加-D才能加入到package.json文件中 ）
  

下面是涉及小知识的扩展 会的可以直接略过哦

npm i 和 npm iinstall的区别：
通常npm install会缩写成npm i，一般认为npm i 和 npm install是等价的
细微的不同在于：

• 用npm i安装的模块无法用npm uninstall删除，用npm uninstall i才卸载掉
• npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号
• 安装报错时intall肯定会出现npm-debug.log 文件，npm i不一定

-D -S 作用：

• -S
  –save的缩写（保存）
  包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。
• -D
  –save-dev的简写
  包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel、sass-loader这些解析器
• 啥都不写的
  包名不会进入package.json里面，因此别人不知道安装了这个包，不建议这样。
• 区别：
  devDependencies中的插件只用于开发环境，不用于生产环境，而dependencies是需要发布到生产环境的。
  像gulp、babel、webpack这些压缩代码、打包的工具，在实际运行中不需要，所以用-D；
  像elementui、echarts这些插件在实际运行中也是需要的，所以用-S。

接着上面的步骤：

• 创建 build文件夹用于存放打包之后的资料
• src/index.js作为入口文件
• 终端运行 webpack ./src/index.js -o ./build/build.js --mode=development
  （development改为 production 会多一个压缩代码的功能）

命令解释：以./src/index.js为为入口 打包后输出到./build/build.js/main.js

总结

• 为什么要引入webpack？
  • 例如无法直接使用less文件以及es6模板 需要一个个工具来进行转换
  • webpack就是将这一个个工具进行打包了 （更便于维护）
• webpack大体思路：
  • 入口文件出发
  • 形成依赖树
  • 打包形成代码块
  • 最后出口文件
• webpack的五大核心概念
  • Entry
  • Output
  • Loader(翻译非JS文件）
  • Plugins（实现压缩等其他功能）
  • Mode
    • production（生产）
    • development ( 开发 ）
  • 初步使用
    • npm init
    • npm install webpack webpack-cli -g
    • npm install webpack webpack-cli -D
    • webpack ./src/index.js -o ./build/build.js --mode=development
  • 其他
    • npm i 和 npm install 区别
    • -S 和 -D区别
      • webpack一般用-D