开发者社区> ArimaMisaki> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

一幅长文细学Vue(一)——Webpack的使用

简介: 在本文中,我们会详细讨论webpack是如何打包发布项目,不过对于Vue来说,Vite可以做到和webpack一样的功能。
+关注继续查看

1 项目开发工具

摘要

​ 在本文中,我们会详细讨论webpack是如何打包发布项目,不过对于Vue来说,Vite可以做到和webpack一样的功能。

声明:如果想要看懂此文章,需具备node.js中npm的知识。

作者:来自ArimaMisaki创作

[TOC]

1.1 webpack工具

1.1.1 什么是webpack

说明:目前企业级的前端项目开发中,绝大多数的项目都是基于Webpack进行打包构建的。

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


1.1.2 安装配置webpack

安装命令npm i webpack webpack-cli

配置

  1. 项目根目录创建webpack.config.js
  2. 将下面给的代码写入webpack.config.js来初始化配置
  3. 在package.json的scripts节点中加入键值对"dev":"webpack"用于运行webpack脚本
  4. 使用npm run dev来运行webpack脚本
  5. 运行脚本后出现dist目录,点开出现mian.js,这是webpack将有兼容性的代码转为没有兼容性的代码,我们在网页中应该导入改文件而非原来有兼容性的js文件。
module.exports = {
    mode:'development' //mode用来指定构建方式,可选值有development和production
}


1.1.3 mode的可选值

说明:mode可选值为developmentproduction

开发环境:development环境下不会对打包生成的文件进行代码压缩和性能优化,但打包速度快,适合在开发阶段使用

生产环境:production环境下会对打包生成的文件进行代码压缩和性能优化,但打包速度慢,适合在项目上线阶段使用


1.1.4 webpack.config.js文件的作用

说明:从配置文件的内容来看很有nodejs的味道,因为文件的内容采用了COMMONJS的语法。webpack是基于nodejs开发出来的打包工具,因此在它的配置文件中,支持使用nodejs相关的语法和模块进行webpack的个性化配置。

webpack.config.js是webpack的配置工具。webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。


1.1.5 修改打包的入口

说明:在webpack中常有如下的约定:

  1. 默认的打包入口文件为src->index.js
  2. 默认的输出文件路径为dist->main.js

修改:如果需要修改入口文件和输出文件路径及路径名,可以按如下配置(注意!这里采用了nodejs的知识内容,如果不懂就记配置就行了)

const path = require('path')

module.exports = {
    mode:'development', //mode用来指定构建方式,可选值有development和production
    entry:path.join(__dirname,'./src/index.js'), //指定打包入口
    output:{
        path:path.join(__dirname,'./dist'), //输出文件的路径
        filename:'bundle.js' //输出文件的名称
    }
}


1.1.6 webpack插件的使用

说明:如果想要将最新的配置生效,则需要使用命令npm run dev来重新生效配置。

升级!:我们可以通过安装和配置第三方插件,监听源码的改动,从而避免频繁使用打包指令。最常用的插件有如下两种:

  • webpack-dev-server:类似于nodemon工具。
  • html-webpack-plugin:webpack中的HTML插件,可以通过该插件定义index.html页面的内容。

安装配置webpack-dev-server

  1. 通过npm i webpack-dev-server -D安装
  2. 修改package.json中dev后的值为webpack serve
  3. 使用npm run dev开启实时打包

安装配置html-webpack-plugin:

  1. 通过npm i html-webpack-plugin -D安装
  2. 配置webpack.config.js
const path = require('path')

const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
    template:'./src/index.html',
    filename:'/index.html'
})

module.exports = {
    mode:'development', //mode用来指定构建方式,可选值有development和production
    entry:path.join(__dirname,'./src/index.js'), //指定打包入口
    output:{
        path:path.join(__dirname,'./dist'), //输出文件的路径
        filename:'bundle.js' //输出文件的名称
    },
    plugins:[htmlPlugin]// 挂载插件实例对象
}


1.1.7 访问自动打包生成的文件

疑问:开启自动打包后,在源码HTML中通过src的方式导入js,修改js后,发现修改后的效果和代码不一致。

回答:修改效果不一致是因为开启自动打包后的js文件并不处于真实物理磁盘中,而是存在于内存中。自动打包处于内存中可以提高实时打包输出的速度。

如何访问:实际上,webpack-dev-server生成到内存的文件默认放在了项目的根目录中,只不过它是虚拟且不可见的,但我们仍然能在html文件中引用它。

实时预览:webpack-dev-server提供了一个实时预览的服务器,我们通过http:localhost:8080可以访问。

image-20220820164433658


1.1.8 注意事项

疑问:html-webpack-plugin将src下的html复制一份到根目录下,可为何我们在编辑器中的文档树无法看到复制的html文件?

回答:该html文件也是置于内存中

疑问:既然通过两个插件生成的实时js文件和复制的html文件都处于内存中,那么删除dist文件夹还会影响项目吗?

回答:不影响


1.1.9 devServer节点

说明:在webpack.config.js配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置,如下:

devServer:{
    open:true, //打包完成后自动打开浏览器
    host:'127.0.0.1', //实时打包使用的主机地址
    port:80, //实时打包使用的端口号
}


1.2 loader加载器

1.2.1 loader概述

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

作用:协助webpack打包处理特定的文件模块,如:

  • css-loader可以打包处理.css相关的文件
  • less-loader可以打包处理.less相关的文件
  • babel-loader可以打包处理webpack无法处理的高级js语法

调用过程示意图

image-20220820190242849


1.2.2 打包处理css文件

说明:如果想要在js文件中导入css文件,可以通过import语法导入,这正是webpack神奇之处。但在没有配置loader的情况下,当我们使用import语法导入后webpack会报错。

配置loader

  1. 通过npm i style-loader css-loader安装
  2. 在webpack.config.js的module->rules数组中添加loader规则,演示如下
  3. 其中test表示匹配的文件类型,采用正则匹配;use表示对应调用的loader,数组中指定的loader顺序固定不可改变,调用顺序从后往前调用
module.exports = {
    mode:'development', //mode用来指定构建方式,可选值有development和production
    entry:path.join(__dirname,'./src/index.js'), //指定打包入口
    output:{
        path:path.join(__dirname,'./dist'), //输出文件的路径
        filename:'bundle.js' //输出文件的名称
    },
    plugins:[htmlPlugin],// 挂载插件实例对象
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']} //采用正则表示loader来处理css后缀的文件
        ]
    }
}


1.2.3 打包处理less文件

配置loader

  1. 通过npm i less-loader less安装
  2. 在webpack.config.js的module->rules数组中添加loader规则,演示如下
  3. 其中test表示匹配的文件类型,采用正则匹配;use表示对应调用的loader,数组中指定的loader顺序固定不可改变,调用顺序从后往前调用

说明:与cssloader不同的是,下载后use数组只需添加less-loader,无需添加less,因为less是内置依赖项。

module:{
        rules:[
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }


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

说明:在高版本的webpack实际上已经不需要再安装这个loader了,但是在1.3.3中整理dist目录下的img会用到,故这里提及。

配置loader

  1. 通过npm i url-loader file-loader安装
  2. 在webpack.config.js的module->rules数组中添加loader规则,演示如下
  3. 其中test表示匹配的文件类型,采用正则匹配;use表示对应调用的loader,数组中指定的loader顺序固定不可改变,调用顺序从后往前调用

提示:在组件中多次使用小图片会导致浏览器总是发出一些不必要的请求,这样会导致网页加载的速度变慢。我们可以将小图片格式转为base64格式,这样可以提高速度。使用?limit=22229可以将小图片转换为base64,意为体积小于等于给定的22229时,即可转为base64。

module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            {
                test: /\.jpg|png|gif$/, use: {
                    loader: 'url-loader',
                    options: {
                        limit: 22229,
                    }
                }
            }
        ]
    }


1.3 打包发布

1.3.1 为什么需要打包发布

说明:项目完成之后,使用webpack对项目进行打包发布的主要原因有以下两点:

  • 开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件
  • 开发环境下,打包生成的文件不会对代码压缩和性能优化


1.3.2 配置webpack打包发布

说明:在package.json文件的script节点上新增build命令,命令中的--model为指定的参数项,指定production后,使用此命令可以覆改webpack.config.js中的model选项。配置如下所示:

  "scripts": {
    "build":"webpack --mode production"
  },


1.3.3 整理dist目录下的文件

js整理说明:如果我们想要在打包发布后,内存中的js文件出现在dist下的js文件夹内,那么我们需要在webpack.config.js配置文件的output节点中,修改filename的值为js/bundle.js

img整理说明:如果我们想要在打包发布后,内存中的img文件出现在dist下的img文件夹内,那么我们需要在webpack.config.js配置文件的output节点中,如下配置:

module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            {
                test: /\.jpg|png|gif$/, use: {
                    loader: 'url-loader',
                    options: {
                        limit: 22229,
                        outputPath: 'image',
                    }
                }
            }
        ]
    }


1.3.4 自动删除dist目录下的旧文件

说明:在打包发布过程中,我们需要先删除开发时的dist,然后在运行命令打包发布,让内存中的文件构建dist。但我们可以再懒点,通过安装clean-webpack-plugin插件来自动清理dist目录下的旧文件。

安装配置

  1. npm i clean-webpack-plugin
  2. 在webpack.config.js中配置如下所示:
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

plugins: [htmlPlugin,cleanPlugin],// 挂载插件实例对象

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
你能手写webpack的打包功能嘛
本文主要介绍手写webpack的打包功能
42 0
ts重点学习141-使用webpack打包ts文件
ts重点学习141-使用webpack打包ts文件
14 0
前端打包优化分析的可视化工具——Webpack Bundle Analyzer
https://juejin.cn/editor/drafts/7101180318144708621 打包优化每个项目的时候,除了看控制台每个包的大小,其实十分推荐一款插件工具 **`Webpack Bundle Analyzer`**
352 0
webpack 打包去掉控制台的console.log()
webpack 打包去掉控制台的console.log()
135 0
webpack 打包vue
webpack 打包vue
28 0
vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
vue+webpack实现vue打包后生成配置文件用以外部修改公共路径
205 0
vue之webpack打包原理和用法详解
vue之webpack打包原理和用法详解
132 0
Vue之webpack打包基础---模块化思维
Vue之webpack打包基础---模块化思维
50 0
一篇文章带你浅入webpack的DLL优化打包
我们在使用第三方包的时候,一般内部的代码都不会变,但是当webpack打包的时候,还是回去处理第三方包。我们是否可以利用一些方法来改进呢?我们可以先对第三方包处理,然后再打包。
72 0
+关注
ArimaMisaki
一个认真并且每天保持学习的开荒者
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
基于VUE的单页面性能优化实践
立即下载
基于webpack和npm的前端组件化实践
立即下载