Vue学习——webpack

伊人--

已于 2023-02-15 16:43:58 修改

阅读量319

点赞数

分类专栏：笔记文章标签： webpack vue.js 学习

于 2022-06-09 09:21:35 首次发布

本文链接：https://blog.csdn.net/weixin_49827467/article/details/125196355

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

学习目标：
前端工程化
webpack的概念
webpack的基本使用
webpack中的插件
webpack中的loader——打包不是 .js后缀的文件
打包发布
Source Map

一、什么是前端工程化？

组件化（复用现有的UI结构、样式、行为）
规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
模块化（js 的模块化、CSS的模块化、资源的模块化）
自动化（自动化构建、自动部署、自动化测试）

二、什么是webpack？

概念：webpack是前端工程化的具体解决方案
Webpack 是一个前端资源加载/打包工具。
它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

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

好处：让程序员把工作的重心放到具体的功能的实现上，提高了前端开发效率和项目的可维护性；

1、webpack的基本使用？

如何安装和配置 webpack？

安装 webpack

 安装 webpack
npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-S 是 --save 的简写，是在开发阶段和上线阶段都需要的，保存在package.json 文件中dependencies 节点下
-D 是 --save-dev的简写，是在开发阶段需要的，保存在package.json 文件中devDependencies 节点下

配置 webpack

配置 webpack
在 package.json 文件中javasripts节点添加：

"scripts": {
  "dev": "webpack serve",
},


> 在项目根目录下，创建webpack配置文件 webpack.config.js ，初始化如下的基本配置

modele.exports = {
    mode:"development",//mode 用来指定构建模式，可选值有development 和 production
}


> 基本配置好之后，运行 npm run dev 命令，可以构建项目打包运行；

停止运行 Ctrl + C；

注意点：
1、webpack 的默认约定
（1）默认的打包入口文件为 src->index.html ；
（2）默认的输出文件路径为 dist->main.js ；
（3）可以在 webpack.config.js 中修改打包的默认约定

entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径

//指定文件存放的路径以及文件名

output: {
    path: path.join(__dirname,'dist'),
    filename: "js/bundle.js"
},

2、webpack 部分插件的作用

（1）webpack-dev-server 插件的作用：

每当修改了源代码，webpack 会自动进行项目的打包和构建；(会启动一个实时自动打包的http服务器；)

webpack-dev-server的安装和配置

安装
npm install webpack-dev-server@3.11.2 -D

配置：

(1)在 package.json 文件中javasripts节点添加：

"scripts": {
  "dev": "webpack serve",
},


（2）在 webpack.config.js 配置文件中，可以通过 DevServer 节点对 webpack-dev-server 插件进行更多的配置：
module.exports = {
    devServer: {
    //首次打包成功后，自动打开浏览器
    open:true,
    // 在http协议中，如果端口号 80，则可以被省略
    port:80,
    // 指定运行的主机地址
    host:'127.0.0.1'
},
}

（2）html-webpack-plugin 插件的作用：可以通过该插件定制 index.html页面的内容

##### html-webpack-plugin的安装和配置

安装
npm install html-webpack-plugin@5.3.2 -D

配置

// 导入 1、HTML 插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

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


module.exports = {
//插件的数组，将来 webpack 在运行时会加载这些插件
//3、通过 Plugins 节点，让 htmlPlugin 插件生效
plugins: [
    htmlPlugin,
    new CleanWebpackPlugin()
] ,
}

3、webpack 中的 loader

（1）为什么要使用loader？

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

（2）loader加载器的作用？

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如；
（1）css-loader 可以打包处理 .css 相关的文件
（2）less-loader 可以打包处理 .less 相关的文件
（3）babel-loader 可与打包处理 webpack 无法处理的高级 JS语法

（3）loader 的调用过程

第一步，安装相关的包

打包处理 CSS 文件

安装 处理 css 文件、less文件的loader
npm i style-loader@3.0.0 css-loader@5.2.6 -D
npm i less-loader@10.0.0 less@4.1.1 -D

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

npm i url-loader@4.1.1 file-loader@6.2.0 -D

打包babel-loader相关的包，处理 JS 高级语法

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

第二步，配置rules

在 webpack.config.js 中的 modelu->rules 数组中，添加loader 规则：
//所有第三方文件模块的匹配规则

  module: {
        rules: [//文件后缀名的匹配规则
            //1、处理 .css 文件的loader
            {test:/\.css$/,use:['style-loader','css-loader']},

            //2、处理 .less 文件的loader
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},

            //3、处理 图片 文件的loader
            //如果需要用到 的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
            //在配置 url-loader 的时候，多个参数之间 使用 & 符号进行分割
            {test:/\.jpg|png|gifs$/,use:['url-loader?limit=22229&outputPath=images']},

            //4、使用babel-loader 处理高级的JS 语法
            //在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换，一定要排除 node_modules目录中的 JS 文件
            //因为第三方包中的 JS 兼容性，不需要程序员关心
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
        ]
    },

在项目根目录下，创建名为 babel-config.js 的配置文件，定义 Babel 的配置项如下

  在项目根目录下，创建名为 babel-config.js 的配置文件，定义 Babel 的配置项如下：
    module.exports = {
    //声明 babel 可用的插件
    //将来 webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
    plugins:[
        [["@babel/plugin-proposal-decorators", { "legacy": true }]]
    ]
}

其中 test 表示匹配的文件类型，use 表示对应要调用的 loader
【注意】：
（1）use 数组中指定的loader 顺序是固定的
（2）多个loader的调用顺序是：从后往前调用
（3）limit 用来指定图片的大小，单位是字节（byte）
（4）只有<=limit 大小的图片，才会被转为 base64 格式的图片

4、打包上线

配置 webpack 的打包发布——配置build命令

在 package.json 文件的 scripts 节点下，新增 build 命令如下：
"scripts": {
  "dev": "webpack serve",
  "build": "webpack --mode production"  //项目发布时，运行 build 命令
},

【注意】
（1）–mode 是一个参数项，用来指定 webpack 的运行模式；
（2）production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化
（3）通过 --mode 指定的参数项，会覆盖 webpack.config.js 中的 mode 选项

配置和使用 plugin 插件自动删除 dist 目录
为了在每次打包发布时自动清理 dist 目录中的旧文件，

安装和配置 clean-webpack-plugin 插件
1、安装
npm install clean-webpack-plugin@3.0.0 -D

2、配置
//按需导入 clean-webpack-plugin 插件，得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin()

//插件的数组，将来 webpack 在运行时会加载这些插件
//3、通过 Plugins 节点，让 htmlPlugin 插件生效
plugins: [
    htmlPlugin,
    cleanPlugin

] ,

5、在开发模式下如何配置 Source Map

什么是source Map？

Source Map 就是一个信息文件，里面储存着位置信息；存储着压缩混淆后的代码，所对应的转换前的位置；
有了它，出错的时候，出错工具将直接显示原始代码的位置，而不是转换后的代码位置；

开发环境下：

建议把devtool 的值设置为 eval-source-map
好处：可以精准定位到具体的错误行，找到源码

module.exports ={
    //建议在开发调试阶段，都把 devtool 的值 设置为 eval-source-map
devtool: 'eval-source-map',
}

生产环境下：

建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
好处：防止源码泄露，提高网站的安全性

可以定位到错误行，但是只有开发人员才能看到源代码

devtool: ‘nosources-source-map’

总结：实际上，在实际项目中，webpack的相关配置项不需要自己手动配置，了解相关知识就可以了；
因为通过 vue-cli 可以快速构建vue项目，简化webpack的配置过程；

vue-cli 是vue.js 开发的标准工具；它简化了程序员基于 webpack 创建工程化的 VUE 项目的过程；