Vue 入门 | webpack 基本使用

webpack的主要功能

它提供了友好的前端模块化开发的支持，以及代码压缩混淆、处理浏览器端javascript 的兼容性、性能优化等强大的功能。

1、webpack 基本使用

1、新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件package.json
2、新建src源代码目录，并创建index.html 和 index.js文件
3、运行  npm install jquery -S 命令，安装jQuery
      清理npm缓存：npm cache clean --force 
      指定镜像安装：npm --registry https://registry.npm.taobao.org install 
4、通过ES6 模块化方式导入jquery

运行 npm init -y 会生成如下一个json 文件

image.png

在通过执行 npm install jquery -S 命令安装jquery的时候，可能会出现安装失败的情况，如下：

image.png

大概意思是：taobao的这个镜像找不到这个库了，可以切换一个国外的镜像

npm config get registry
--> http://registry.npm.taobao.org/

这是以前安装vue的时候设置的镜像，的确比不设置的时候快很多，

设置国外的镜像

npm config set registry http://registry.npmjs.org

然后再执行安装命令 , 发现就可以正常安装了（如果后面发现国外的不好用了， 可以在切换到淘宝镜像）

# 其中 -S 是 --save简写，指定引用的库放在dependencies 节点下，这个节点下的库， 在开发和发布都会用到的库
npm install jquery -S 

image.png

此时，会在package.json文件中发现一个dependencies 节点， 并保留有jquery的信息，就代表这个项目要使用这个库了

image.png

2、在项目中安装 webpack

在终端运行如下命令，安装webpack相关的两个包

# --save-dev: 安装到项目的依赖中 | 简写：-D
# 安装最新版本（其中-D 是将引用的内容放在 devDependencies节点下，这个节点下的库， 只用于开发的时候）
npm i -D webpack
# 安装指定版本
npm i -D webpack@ 
#安装 webpack-cli
npm i -D webpack-cli

在等待一段时间后， 在package.json文件又多了点新东西如下：

"devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
}

3、在项目中配置webpack

1、在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：
这个文件是在 npm run xxx命令 的时候，加载项目根目录下面的 webpack.config.js 文件， 并拿到mode的数据，然后判断用什么方式打包

// 使用node.js 中的导出语法，向外到处一个webpack的配置对象
module.exports = {
  // 代表webpack的运行模式，可选值为： development 和 production
  mode : "development "
}

经过测试总结得到：
1）、在开发阶段mode 要设置为："development" ，这种模式打包速度快，体积大，打包效率很高 ，基本没有压缩。
2）、在上线阶段mode要设置为："production" ， 这种模式 打包速度慢，体积小，打包效率低，但是压缩的包很小。

2、 在package.json的scripts节点下，新增dev 脚本如下：

"scripts": {
    // 前面的名字(dev)可以随意取， 后面是要执行的脚本，所以是固定的
    "dev" : "webpack"
}

3、在命令行窗口中执行脚本 npm run dev， 结果如下：

image.png

到这一步，我们借助webpack 工具对我们的项目做了一个处理，帮助我们处理兼容性问题，在dist目录下面生成的main.js 就已经没有兼容性问题了， 我们在html中可以直接使用

然后会在项目根目录下面多一个dist的目录文件

image.png

4 、 webpack 中的默认约定

在webpack 4.x 和 5.x 的版本中， 有如下默认约定：
1)、默认的打包入文件为： src --> index.js
2)、默认的输出文件路径为： dist --> main.js

5 、 自定义打包入口与出口

在webpack.config.js 配置文件中，通过entry 节点指定打包 的入口。通过output节点指定打包的出口。

# 导入nodejs 的 path model
const path = require('path')

// 使用node.js 中的导出语法，向外到处一个webpack的配置对象
module.exports = {
    // 代表webpack的运行模式，可选值为： development 和 production
    mode : "development",
    /**
     *  entry:"指定要处理哪个文件" 。 
     *  __dirname ： 就代表当前文件所在的目录
     */
    entry:path.join(__dirname,'./src/index123.js'),
    /**
     * output:"指定生成的文件要存放在哪里
     */
    output:{
        // 存放到的目录
        path:path.join(__dirname,'dist'),
        // 生成的文件名
        filename : 'bundle.js'
    }
}

这种需要手动打包（npm run dev），然后再启动服务，刷新访问我们的目标文件（index.html），那能不能，在我们修改完毕代码后，里面就展示在浏览器访问的目标文件中呢？

答案是可以的 。

6、webpack 插件

6.1 webpack-dev-server

6.1.1 webpack-dev-server 插件 介绍

在这里需要介绍一个 插件

webpack-dev-server

这个插件会监听文件是否修改，并在文件修改完毕并保存的时候， 从新编译执行（webpack命令）

# 如果不知到工具版本，可以不写版本，默认下载最新版本
npm install [email protected] -D

6.1.2 webpack-dev-server 使用

在package.json 文件中的 scripts 脚本中的webpack 加上 serve 即可

"scripts": {
    #  在webpack后面加个空格 serve 即可
    "build": "webpack serve"
}

这样就启动了 webpack-dev-server插件

由于在修改代码的过程中需要不断的从新编译，所以插件为了快速实现效果，回把编译好的文件放在内存中，文件中不会存在，这样就实现了快速更新的目的。

同样，在我们启动服务后，可以通过http://localhost:8080/bundle.js 这个地址访问，bundle.js 是自定义的名字，默认是 main.js , 但是这个文件不会写在物理磁盘上。

那么这个时候，我们在html就可以直接使用bundle.js文件

6.2 html-webpack-plugin

6.2.1 html-webpack-plugin简介

这个插件是方便我们把源码目录（src）里面的html文件拷贝到 指定目录下面， 而不是直接访问源码目录(src)

6.2.2 配置html-webpack-plugin

#1、导入html-webpck-plugin , 创建一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

#2、创建HtmlPlugin  插件实例对象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', // 指定原文件的存放路径
filename:'./index.html' // 指定生成的文件存放路径 
})

#3、在webpack.config.js配置文件中 通过plugins 节点，使htmlplugin插件生效
module.exports = {
    mode : "development",
    plugins: [htmlPlugin]
}

这个插件的作用
1、把 指定的文件放在内存中， 而不是放在物理磁盘中
2、html 插件在生成的index.html页面，自动注入了打包的bundle.js文件（通过查看index.html文件 源文件代码可以看到）

7 webpack中的loader

在webpack中一切皆模块，都可以通过ES6导入语法导入。那么在导入非js文件的时候，就需要通过配置的loader 来加载不同的资源文件，否则就会报错

image.png

7.1 打包处理css文件

// 执行安装命令，处理css 文件
npm i style-loader css-loader -D , 
在webpack.config.js的module->rules 数组中，添加loader规则如下：

    
// 所有第三方文件模块的匹配规则
module:{
    // 文件后缀名的匹配规则
    rules:[
        /**
         * 使用test 正则表达式匹配文件后缀
         * use 表示要对应调用的loader
         * 注意： use数组中指定loader的顺序是倒序,也就是先给最后一个loader 处理（css-loader）
         * 当css-loader处理完毕之后，会把处理结果转交给下一个loader（style-loader），
         * 如果没有更多的loader，那么就把处理结果返回给webpack，最后webpack把结果合并到bundle.js文件中
         */
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

7.2 打包处理less文件

// 安装less-loader less (less 是 less-loader的内置依赖项)
npm i less-loader less -D
// 然后在module-->rules 节点里面配置 一个新的文件匹配和加载器
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}

7.3 打包处理 样式中国与url路径相关的文件

// 安装 url-loader  file-loader (内置依赖项)
npm i url-loader file-loader -D
// 配置 url-loader ，加载 jpg 、png、gif 的文件
/**
* 参数：limit 是告诉url-loader ，在加载图片的时候， 如果图片的大小小于或等于给定值的时候，
* 才会把图片转换成base64；如果图片大小大于给定值，则不会转换成base64，而是直接用地址访问
 */
{test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}

7.4 打包处理 处理复杂js

例如：

function info(target) {
  target.info = 'add info'
}
@info
class Person {}
console.log("=======",Person.info)

这个解析器语法，正常js是无法解析的

image.png

安装babel-loader 相关包

1、安装
npm i [email protected] @babel/[email protected] @babel/[email protected] -D
// 其中 @babel/plugin-proposal-decorators  这个插件可以识别 解释器语法
2、配置 加载项
/**
* 使用babel-loader 处理js高级语法
* exclude ： 排除项 ， 即：排除第三方的包 node_models , 第三方包的兼容性不需要我们操心
*/
{test:/\.js$/,use:['babel-loader'],exclude:/node_models/},

3、 在根目录下， 创建名为babel.config.js 的配置文件，定位babel的配置项如下:

module.exports = {
    // 声明babel可用的插件
    plugins :[
        ['@babel/plugin-proposal-decorators',{legacy:true}]
    ]
}