webpack(一)——webpack的安装和基本配置

1. 为什么会出现构建工具包

1.1 前端开发的复杂化

前端开发目前我们遇到什么复杂的问题？

1. 开发过程中我们需要通过模块化的方式开发
2. 使用高级的特性加快开发效率或者安全性，ES6+，TypeScript，通过sass，less等方式来编写css样式代码
3. 我们希望实时地监听文件的变化来反映到浏览器上面，提高开发效率
4. 开发完成之后我们需要将代码进行压缩，合并以及相关的优化

1.2 前端三个框架的脚手架

• 框架的创建过程我们都是基于脚手架
• 事实上vue-cli都是基于webpack，帮助我们模块化、less、TypeScript

2. webpack是什么

webpack is a static module bundler for modern JavaScript application.

• 打包bundler：webpack可以帮助我们进行打包，所以他是一个打包工具
• 静态的static：我们最终可以将代码打包成最终的静态资源（部署到静态服务器）
• 模块化module：webpack默认支持各种模块化开发，ES Module，CommonJS，AMD等
• 现代的modern：正是因为前端开发面临各种各样的问题，才催生了webpack的出现和发展

3. webpack的安装

1. 安装依赖：先安装nodejs，并且安装npm
2. 安装webpack，安装webpack-cli（这个不是必需的）

npm install webpack webpack-cli -D(局部安装)
npm install webpack webpack-cli -g(全局安装)

4. webpack初体验

1. 在编写代码的时候，模块化有很多种方式实现，ES6和commonjs的方式，如果两种方式同时使用的话，浏览器并不能识别，这之后需要用到webpack帮助我们改造打包

2. 进入文件夹中输出webpack，多了一个dist文件夹，是被压缩过的代码，直接在index.html引入dist下的文件，代码在浏览器下可以正常运行

3. dist文件夹下直接转化出来的是ES6的代码。在weback官方文档中提到，webpack不会更改代码中除了import和export语句以外的部分（没有配置babel的情况下）

4. 直接敲webpack命令的时候，实际执行的是：在src的目录下面找index.js的文件，用这个文件作为入口，之后通过这个入口去看对其他一些文件的引入，再进行转化打包

5. 直接敲webpack的时候，是全局的webpack，但是实际上用的是局部的webpack

6. 由于需要配置好不同的webpack，所以需要在文件中配置package.json的文件，用npm install安装

7. 生成package.json配置文件

   npm init
   

8. 安装局部的webpack

    npm install webpack webpack-cli -D
   

9. 直接敲webpack用的是全局的webpack，需要用局部的webpack

   方法一:

   ./node_modules/.bin/webpack
   

   方法二：

   npx webpack
   

   方法三：

   在package.json里面写命令

   "scripts": {
       "build": "webpack"
     }
    -> npm run build
   

5. webpack配置文件的使用

1. 指定入口和出口

   方法一：

   npx webpack --entry ./src/main.js --output-path ./build
   

   方法二：package.json

   "scripts": {
       "build": "webpack --entry ./src/main.js --output-path ./build"
     }
    -> npm run build
   

2. 以上查阅官方文档：文档-API-命令行接口 Flags

3. 应用的时候，在webpack配置：

   新建webpack.config.js

   const path = require("path");
   
   module.exports = {
       // 单入口
   	entry: "./src/main.js",
       // output跟的是对象
       output: {
           // 打包的文件名
           filename: "bundle.js",
           // 这里的路径不能使用相对路径，只能使用绝对路径
           // __dirname这个可以拿到当前文件的绝对路径,拼接上build文件夹
           path: path.resolve(__dirname, "./build")
       }
   }
   

指定配置文件

1. 如果webpack配置文件不叫webpack.config.js的时候，执行命令，相当于执行的时候没有配置webpack的命令。

   webpack手动指定配置文件

   // --config + 文件名
   webpack --config wk.config.js
   

6. webpack依赖关系图

1. src目录下有一个text.js

   console.log("hello world")
   

   在打包的时候没有打包进去，为什么？

   因为webpack从入口文件开始进去，寻找用到的文件进行打包，text.js与入口文件没有任何关系，所以没有打包的必要，就没有打进去

2. 那么webpack到底是怎么对我们的项目进行打包的呢？

   • 事实上webpack在处理应用程序时，会根据命令或者配置文件找到入口文件

   • 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（js文件，图片，css文件，字体）

   • 然后遍历图结构，打包一个个模块

   所以说，如果一个东西没有用到的时候，虽然存在在项目内，但是webpack不会对它进行打包

   这个就是tree-shaking

3. 需要打包的话，可以通过入口文件引入

   import "./js/text"