Webpack 打包工具全析

Webpack

• webpack官网

• webpack中文网

概念 ==> webpack 是什么?? 前端模块化打包(构建)工具

 

webpack 的两个方面

1 - 打包 2 - 模块化

打包 : 前端打包(构建)都能做什么??

1. 语法转换

   - Less/SASS 预编译CSS -> CSS -> 浏览器中使用
   - ES6 新语法有兼容性问题 -> ES5 -> 浏览器中使用
   - const fn = () => {} ===> var fn = function() {}

2. 文件压缩、合并

   JS/HTML/CSS 压缩后，才能发布上线
   文件合并（ 不管有多个JS、CSS，默认打包直接生成一个JS文件 ）

3. 开发期间提供一个服务器环境

    自动打开浏览器、监视文件变化，自动刷新浏览器

4. 项目上线,打包后才能上线

5. 总结

    webpack 这个打包（构建）工具，就是提供了前端开发需要的一整套完整的流程，也就是
    webpack 能够渗透的前端开发的各个环节、各个流程中，帮你实现 复杂、繁琐、重复的工作，有了 webpack 后，开发人员只需要关注当前要实现的业务即可。

模块化功能

• webpack 基于 node

• 模块化 : 逻辑

• 组件化 : 界面

• webpack为前端提供了模块化开发环境，有了webpack，就可以像写Node代码一样，写前端代码了

• 在 webpack 看来所有的资源都是模块，不管是： CSS、图片、字体、JS、html 等

• 在webpack提供的模块化环境中，
  1 想要加载一个JS文件，只需要 require('./a.js')
  2 想要加载一个CSS文件，只需要 require('../css/index.css')
  3 想要加载一个图片文件，只需要 require('../iamges/a.png')
  4 ...

Webpack 四个核心概念：

入口(entry)、出口(output)、加载器(loader)、插件(plugins)

• 入口 : 要打包哪个文件

• 出口 : 要打包到哪里

• 加载器 : 加载除了js文件其他文件的功能

• 插件 : 处理加载器完成不了的功能, 使用插件

 

webpack 使用步骤

webpack 第一阶段 命名初始化阶段

文件名不能有汉字,不能取名叫 webpack

1. 生成 package.json, 命令 : npm init -y

2. 安装 : npm i -D webpack webpack-cli

webpack  : 是 webpack 工具的核心包
webpack-cli : 提供了一些在终端中使用的命令
-D(--save-dev) : 表示项目开发期间的依赖,也就是 : 线上代码中用不到这些包了
​
npm i vue       上线也会用到的包
npm i webpack -D 开发阶段使用的包  (-D --save-dev  development(开发))

1. 在 package.json的scripts中,添加脚本

 "scripts": {
    "build": "webpack main.js"
  },
// webpack 是webpack-cli 中提供的命令, 用来实现打包的
// ./main.js 入口文件,要打包哪个文件

1. 创建一个main