[TOC]

webpack官网 跟着b站上王红元老师学习，其中04和05章节没问题，下次复习的时候直接看这两个章节

目录

  • 认识webpack
  • webpack的安装
  • webpack的起步
  • webpack的配置
  • loader（核心）的使用
  • webpack中配置Vue
  • plugin的使用
  • 搭建本地服务器

一. 认识webpack

1.1 认识webpack

打包工具有：grunt（不常用）/gulp/webpack/rollup
前端模块化规范：AMD/CMD/CommonJS（能用，但浏览器不能识别）

在没有ES6的时候，以上3种都需要底层支撑，通过借助其他工具（如webpack），才能进行模块化开发；并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

                      ES6（浏览器就可以支持）

作用：进行模块化和打包。

  • 模块化：
  • 打包：就是将webpack中的各种资源模块进行打包合并成一个或多个包。并且在打包的过程中，还可以对资源进行处理，比如压缩图片、将scss转成css、将ES6语法转成ES5语法、将TypeScript转成Javascript等操作。

1.2 webpack和gulp的对比

image.png

二. webpack安装

2.1 webpack与node、npm之间的关系

image.png

2.2 webpack安装

安装webpack，首先需要安装Node.js,Node.js自带了软件包管理工具npm

2.2.1 查看自己的node版本

:::info //在终端cmd
node -v :::

2.2.2 全局安装webpack

:::info // 在终端cmd
npm install webpack -g //默认安装最新的 g(global,全局的意思）

// 指定版本号
npm install webpack@3.6.0 -g （这里老师先指定了版本号为3.6.0，因为vue cli2依赖该版本） :::

2.2.3 局部安装webpack（后续才需要）

（1）了解局部安装 :::info //在webstorm里的终端
cd 对应目录 //先cd到对应的目录下面，再执行命令！！！ 老是忘记
npm install webpack —save-dev // 此处，webpack也可指定版本号
//—save-dev可以紧跟install后面；也可以放在最后
//—save-dev是开发时依赖，项目打包后不需要继续使用的 :::

:::info Q：为什么全局安装后，还要再进行局部安装呢？
A：因为在真实的开发中，比如你初入一个公司，从github上clone项目，项目用的可能是webpack3.6.0，但全局的webpack可能是4.1.0，版本不一致有可能会造成打包出现问题。所以通常一个项目，都有自己局部的webpack。

在终端（cmd，某个软件的terminal等）直接执行webpack命令，使用的全局安装的webpack；
当在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack。 :::

三. webpack的起步

3.1 准备工作

image.png

说明：/src/main.js 也经常被命名为index.js

3.2 js文件的打包

image.png

cd ..      //cd到指定的目录下   别忘记了！！！

webpack ./src/main.js ./dist/bundle.js 
//含义：就是将src文件夹下的main.js打包成dist文件夹下的bundle.js
//webpack在打包main.js文件的时候，它会看有没有依赖其他文件，然后会自动处理模块间的依赖

image.png

四. webpack的配置

为了让打包的命令更为简洁，我们需要创建一个webpack.config.js文件，并在其中对入口和出口进行配置。
使得最后的命令由”webpack ./src/main.js ./dist/bundle.js”简写成”webpack”。（但是一般打包的时候，我们还是不常用这个命令，用npm run build代替，后续会将如何配置，使得这两个命令对应起来）

4.1 入口和出口的映射配置

我们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法将这两个参数写到配置中，在运行时直接读取呢？（就不用写webpack ./src/main.js ./dist/bundle.js这么长的命令了）
当然可以，就是创建一个webpack.config.js文件，在里面进行这两个参数（文件入口和出口）的配置。

webpack.config.js文件

const path = require('path'); //用于动态设置为绝对路径 path是Node.js中的模块

module.exports = {
  //定义文件导入入口 
    entry:'./src/main.js',
  //定义文件导出出口
  //出口通常是一个对象，里面至少包含两个重要属性：path、filename
    output:{             
        path:path.resolve(__dirname,'dist'), //要设置绝对路径，且是动态地获取路径(用到node语法)
        filename:'bundle.js',
    }
}

:::info 注意：因为在设置出口路径的时候用到了node中的path包，所以我们需要在项目中引用包
npm init //一旦涉及到node相关的时候，尽快执行这条命令，最后一开始弄项目的时候就建好
// 在init过程中，需要进行如下设置

  • package name（02 webpack的配置）：meetwebpack //设置包的名字

                                                                                  //如果直接敲回车，默认包名是括号中的名字，但是里面可能中文符号是不能作为包名的

  • version ：(1.0.0)

  • description：
  • entry point：(webpack.config.js) index.js //默认括号里的名字，但是此处的入口设置肯定不能是括号里的内容，所以目前我们先随便取一个名字
  • test command： //先不写
  • git repository： //先不写
  • keywords： //先不写
  • author： //先不写
  • license：(ISC) //先不写 :::

:::info 通过npm init生成一个package.json文件
ps：任何一个项目，如果想依赖单独的node环境的话，都必须有一个package.json文件（告诉我们当前项目的信息，如各种工具的版本号） ::: image.png

说明：目前package.json没有依赖任何东西。如果后期有的话，需要执行npm install 命令，以此帮助你在项目中生成一些东西；或者如果你手动更改里面的内容，webstorm软件会提醒你进行更新操作。

4.2 webpack和npm run build命令的映射配置

在package.json中进行配置。

// scripts是脚本的意思，比如你执行npm run test,它会执行"echo \......exit 1"的命令 
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",   //进行映射配置

  },

:::info 当你在webstorm的终端中执行npm run build（或webpack）的时候，它会按照一定的顺序寻找命令对应的位置

  • 首先，会寻找本地的node_modules/.bin路径中对应的命令，有的话，就使用局部安装；

  • 如果没有找到，就回去全局的环境变量中寻找，使用的就是全局安装。
    :::

    4.3 局部安装的流程

    目前，我们使用的webpack是全局的webpack，如果我们想使用局部来打包呢？

  • 因为一个项目往往依赖特定的webpack版本，全局的版本可能跟这个项目的webpack版本不一致，导致打包出现问题；

  • 所以，通常一个项目都有自己局部的webapck。

（1）安装流程 :::info npm install webpack —save-dev
或
npm install webpack@3.6.0 —save-dev //指定具体的版本号 :::

知识点补充： 开发时依赖（—save-dev）：只有在开发的时候会用到webpack工具，真正项目运行的时候不会用到（webpack在打包完之后就没有用了） 运行时依赖

安装完成后，在package.json文件中会多出以下内容。


  "devDependencies": {      //devDependencies就是开发时依赖的意思
    "webpack": "^5.42.0",
    "webpack-cli": "^4.7.2"
  }

image.png

五. loader（核心）的使用

image.png
一般操作流程：先安装：npm isntall —save-dev css-loader(以css为例）
在webpack.config.js文件中配置rule（需要到官网中寻找对应的loader）

5.1 使用css文件时的处理

image.png
image.png
image.png
image.png

5.2 使用less文件时的处理

image.png
image.png

5.3 图片文件的处理

image.png
image.png

5.4 ES6语法处理

image.png

六. webpack中配置Vue

image.png
image.png

index.js文件 App.vue文件 需要在入口文件index.js文件导入App.vue文件：import App from “./App.vue” （上面图片中没有加）

image.png
Vue在构建最终版本的时候，它构建了两类版本。
1.运行时runtime-only：在你的代码中，不可以有任何的template
2.运行时runtime-compiler：代码中，可以有template（组件？）。因为有compiler代码可以用于编译template

spa（simple page web application）在单页面复应用中用得比较多，不过也可以用在多页面

只有一个index.html页面，其他页面通过“vue-router（前端路由）”跳转

image.png
image.png
image.png
image.png
image.png
image.png
但是，在用vue-loader处理vue文件之前，我们还需要借助一个插件来处理vue
image.png
image.png

七. plugin的使用

image.png

7.1 添加版权的Plugin（BannerPlugin）

webpack自带的插件
image.png
image.png
重新打包（到指定的目录下）：npm run build

7.2 HtmlWebpackPlugin

非webpack自带插件，是第三方插件
image.png
以下两种操作都需要在webpack.config.js文件中进行设置。
（1）需要设置template中的值
如果没有设置template:’index.html’的时候会导致dist/index.html没有

，所以，我们需要把src文件夹下的index.html文件作为模板
image.png
image.png

（2）删除publicPath属性
需要删除之前在output中添加的publicPath属性，否则插入的