Vue全家桶：webpack配置打包

菜小编

2023-7-15

WEB前端开发

Web 开发面临的困境

文件依赖关系错综复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级 Javascript 特性兼容程度较低
etc…

1. webpack 概述

webpack 是一个流行的 前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。
webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。

2. webpack 的基本使用

2.1 创建列表隔行变色项目

① 创建项目目录并初始化:
新建项目空白目录，并运行 npm init –y 命令
初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 创建首页及js文件:
- 新建 src -> index.html 首页
- 在项目目录中创建js文件夹，并在文件夹中创建index.js文件
④ 初始化首页基本的结构
- 在页面中摆放一个ul，ul里面放置几个li

⑤ 安装jQuery: 打开项目目录终端，输入命令 npm install jquery –S 命令，安装 jQuery

导入jQuery

复制代码

//打开index.js文件，编写代码导入jQuery并实现功能：
import $ from "jquery";
$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
})

⑥ 通过模块化的形式，实现列表隔行变色效果

注意：

此时项目运行会有错误，因为import $ from "jquery";这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题
所以我们需要webpack来帮助我们解决这个问题。

2.2 在项目中安装和配置 webpack

① 运行 npm install webpack webpack-cli –D 命令，安装 webpack 相关的包
② 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件

③ 在 webpack 的配置文件中，初始化如下基本配置：

复制代码

module.exports = {
    mode:"development"//可以设置为development(开发模式)，production(发布模式)
}
// 补充：mode设置的是项目的编译模式。
// 如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
// 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些

④ 在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

复制代码

"scripts":{
    "dev":"webpack"
}
// 注意：scripts节点下的脚本，可以通过 npm run 运行，如：
// 运行终端命令：npm run dev
// 将会启动webpack进行项目打包

⑤ 在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。
等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。

2.3 配置打包的入口与出口

webpack 的 4.x 版本中默认约定：

打包的 入口文件 为 src -> index.js
打包的 输出文件 为 dist -> main.js 如果要修改打包的入口与出口，可以在 webpack.config.js 中新增如下配置信息：

复制代码

const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/xx.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置文件名
        filename:"res.js"
    }
}

2.4 配置 webpack 的自动打包功能

默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件
那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作

① 安装自动打包功能的包:
运行 npm install webpack-dev-server –D 命令，安装支持项目自动打包的工具
② 修改 package.json -> scripts 中的 dev 命令如下:
③ 将 src -> index.html 中，将引入的js文件路径更改为：<script src="/bundle.js"></script>
④ 运行 npm run dev 命令，重新进行打包
⑤ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：

webpack-dev-server 会启动一个实时打包的 http 服务器
webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的
在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：
- "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

2.5 配置 `html-webpack-plugin` 生成预览页面

使用html-webpack-plugin 可以生成一个预览页面。
因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面
还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。

实现默认预览页面功能的步骤如下：

① 安装默认预览功能的包:html-webpack-plugin:
运行npm install html-webpack-plugin –D命令，安装生成预览页面的插件

② 修改 webpack.config.js 文件头部区域，添加如下配置信息:

复制代码

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称
    filename:"index.html"
})

③ 修改 webpack.config.js 文件中向外暴露的配置对象，新增配置节点,添加plugins信息:

js

复制代码
```
    module.exports = {
        ......
        plugins:[ htmlPlugin ]
    }
```

2.6 配置自动打包相关的参数

3. webpack 中的加载器

3.1 通过 loader 打包非 js 模块

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader加载器包含：

1).less-loader
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader 注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：

less-loader 可以打包处理 .less 相关的文件
sass-loader 可以打包处理 .scss 相关的文件
url-loader 可以打包处理 css 中与 url 路径相关的文件

3.2 loader 的调用过程

3.3 webpack 中加载器的基本使用

CSS
LESS
SCSS
PostCSS
JavaScript
Image/Font
Vue

3.3.1 打包处理 css 文件

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

复制代码

module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                        //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                        //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    }
                ]
            }
        }

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是：从后往前调用

3.3.2 打包处理 less 文件

① 运行 npm i less-loader less -D 命令

② 在 webpack.config.js 的 module -> rules数组 中，添加 loader 规则如下：

复制代码

module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                        //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                        //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.less$/,
                        use:['style-loader','css-loader','less-loader']
                    }
                ]
            }
        }

3.3.3 打包处理 scss 文件

① 运行 npm i sass-loader node-sass -D 命令

② 在 webpack.config.js 的 module -> rules 数组 中，添加 loader 规则如下：

复制代码

 module.exports = {
            ......
            plugins:[ htmlPlugin ],
            module : {
                rules:[
                    {
                        //test设置需要匹配的文件类型，支持正则
                        test:/\.css$/,
                        //use表示该文件类型需要调用的loader
                        use:['style-loader','css-loader']
                    },
                    {
                        test:/\.less$/,
                        use:['style-loader','css-loader','less-loader']
                    },
                    {
                        test:/\.scss$/,
                        use:['style-loader','css-loader','sass-loader']
                    }
                ]
            }
        }
   // 补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
   // https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

3.3.4 配置 postCSS 自动添加 css 的兼容前缀

① 运行 npm i postcss-loader autoprefixer -D 命令

② 在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：

复制代码

const autoprefixer = require("autoprefixer");
    module.exports = {
        plugins:[ autoprefixer ]
    }

③ 在 webpack.config.js 的 module -> rules 数组中，修改 css 的 loader 规则如下：

复制代码

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader','postcss-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

3.3.5 打包样式表中的图片和字体文件

① 运行 npm i url-loader file-loader -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

复制代码

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                },{
                    test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                    //limit用来设置字节数，只有小于limit值的图片，才会转换
                    //为base64图片
                    use:"url-loader?limit=16940"
                }
            ]
        }
    }

其中 ? 之后的是 loader 的参数项。
limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

3.3.6 打包处理 js 文件中的高级语法

打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包

① 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
② 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D

③ 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：

复制代码

module.exports = {
            presets:["@babel/preset-env"],
            plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

④ 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

复制代码

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                },{
                    test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                    //limit用来设置字节数，只有小于limit值的图片，才会转换
                    //为base64图片
                    use:"url-loader?limit=16940"
                },{
                    test:/\.js$/,
                    use:"babel-loader",
                    //exclude为排除项，意思是不要处理node_modules中的js文件
                    exclude:/node_modules/
                }
            ]
        }
    }

作者：没有故事的Zhang同学
链接：https://juejin.cn/post/7255514764754436155
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

THE END

Vue全家桶：webpack配置打包

1. webpack 概述

2. webpack 的基本使用

2.1 创建列表隔行变色项目

2.2 在项目中安装和配置 webpack

2.3 配置打包的入口与出口

2.4 配置 webpack 的自动打包功能

2.5 配置 html-webpack-plugin 生成预览页面

2.6 配置自动打包相关的参数

3. webpack 中的加载器

3.1 通过 loader 打包非 js 模块

3.2 loader 的调用过程

3.3 webpack 中加载器的基本使用

3.3.1 打包处理 css 文件

3.3.2 打包处理 less 文件

3.3.3 打包处理 scss 文件

3.3.4 配置 postCSS 自动添加 css 的兼容前缀

3.3.5 打包样式表中的图片和字体文件

3.3.6 打包处理 js 文件中的高级语法

2.5 配置 `html-webpack-plugin` 生成预览页面