Vue3学习-01_前端工程化与webpack

这篇具有很好参考价值的文章主要介绍了Vue3学习-01_前端工程化与webpack。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

最近在学习Vue知识,参照的教程是黑马程序员官网提供的免费前端教程,这里记录一下自己的学习笔记以及遇到的相关问题。

前端工程化的概念及优点

前端工程化指的是:在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。最终落实到细节上,就是实现前端的“4 个现代化”:
⚫ 模块化(js 的模块化、css 的模块化、其它资源的模块化)
⚫ 组件化(复用现有的 UI 结构、样式、行为)
⚫ 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理)
⚫ 自动化(自动化构建、自动部署、自动化测试)
优点是
1)体系化
2)提高开发效率

前端工程化的解决方案

早期的前端工程化解决方案:
⚫ grunt( https://www.gruntjs.net/ )
⚫ gulp( https://www.gulpjs.com.cn/ )
目前主流的前端工程化解决方案:
⚫ webpack( https://www.webpackjs.com/ )
⚫ parcel( https://zh.parceljs.org/ )

webpack基本使用

webpack简介

webpack 是前端项目工程化的具体解决方案。
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性
能优化等强大的功能。
好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。
注意:目前企业级的前端项目开发中,绝大多数的项目都是基于 webpack 进行打包构建的。

使用流程

首先需要安装node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件。Webpack至少需要Node.js v0.6版本,直接安装最新版就好了。
① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构(这里可以自己随意编写相关页面即可)

安装webpack

npm install webpack webpack-cli -D

项目中配置webpack

在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置:

module.exports={
    mode: 'development' //mode 执行构建模式, 可选值  development 和 production
}

在 package.json 的 scripts 节点下,新增 dev 脚本如下:

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

script节点下脚本,可以通过 npm run 执行,如npm run dev
备注: js文件可以使用//写注释,但是json文件不行,npm解析会报错。

mode 节点配置

可选值有两个,分别是:
① development
⚫ 开发环境
⚫ 不会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度快,适合在开发阶段使用
② production
⚫ 生产环境
⚫ 会对打包生成的文件进行代码压缩和性能优化
⚫ 打包速度很慢,仅适合在项目发布阶段使用

webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前,会先读取这个配置文件,
从而基于给定的配置,对项目进行打包。
注意:由于 webpack 是基于 node.js 开发出来的打包工具,因此在它的配置文件中,支持使用 node.js 相关
的语法和模块进行 webpack 的个性化配置。

webpack 中的默认约定

在 webpack 中有如下的默认约定:
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意:可以在 webpack.config.js 中修改打包的默认约定

自定义打包的入口与出口

在 webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下:

module.exports={ 
    entry: path.join(__dirname,'./src/index.js'),
    output:{
        path: path.join(__dirname,'./dist'),//输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    },
    mode: 'development' //mode 执行构建模式, 可选值  development 和 production,
}

webpack 插件的作用

通过安装和配置第三方的插件,可以拓展 webpack 的能力,从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个.

webpack-dev-server

⚫ 类似于 node.js 阶段用到的 nodemon 工具。

⚫ 每当修改了源代码,webpack 会自动进行项目的打包和构建,webpack-dev-server 可以让 webpack 监听项目源代码的变化,从而进行自动打包构建。

配置 webpack-dev-server

安装:npm install webpack-dev-server -D
然后修改 package.json -> scripts 中的 dev 命令如下:

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

② 再次运行 npm run dev 命令,重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址,查看自动打包效果

打包生成的文件哪儿去了?

① 不配置 webpack-dev-server 的情况下,webpack 打包生成的文件,会存放到实际的物理磁盘上
⚫ 严格遵守开发者在 webpack.config.js 中指定配置
⚫ 根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后,打包生成的文件存放到了内存中
⚫ 不再根据 output 节点指定的路径,存放到实际的物理磁盘上
⚫ 提高了实时打包输出的性能,因为内存比物理磁盘速度快很多

生成到内存中的文件该如何访问?

webpack-dev-server 生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。
⚫ 可以直接用 / 表示项目根目录,后面跟上要访问的文件名称,即可访问内存中的文件
⚫ 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件
如:localhost:8080/bundle.js

html-webpack-plugin

⚫ webpack 中的 HTML 插件(类似于一个模板引擎插件)
⚫ 可以通过此插件自定制 index.html 页面的内容
html-webpack-plugin 是 webpack 中的 HTML 插件,可以通过此插件自定制 index.html 页面的内容。
需求:通过 html-webpack-plugin 插件,将 src 目录下的 index.html 首页,复制到项目根目录一份

安装html-webpack-plugin

npm install html-webpack-plugin -D

配置 html-webpack-plugin
webpack.config.js中添加内容:
//1. 导入html插件,得到构造函数
const HtmlPlugin=require('html-webpack-plugin')
//创建html插件的实例对象
const HtmlPlugin=new HtmlPlugin(
    {
        template:'./src/index.html',//文件原地址
        filename:'./index.html',//文件存放地址
    }
)

module.exports={ 
    plugins:[htmlPlugin],
}
html-webpack-plugin作用

① 通过 HTML 插件复制到项目根目录中的 index.html 页面,也被放到了内存中
② HTML 插件在生成的 index.html 页面的底部,自动注入了打包的 bundle.js 文件

devServer 节点

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

module.exports={ 
    entry: path.join(__dirname,'./src/index.js'),
    output:{
        path: path.join(__dirname,'./dist'),//输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    },
    mode: 'development' ,//mode 执行构建模式, 可选值  development 和 production,
    devServer: {
        open: true ,//初次打包完成后,自动打开浏览器
        host: '127.0.0.1',//试试导报所使用的主机地址
        port:80,//实时打包的端口号
     
     }
}

注意:凡是修改了 webpack.config.js 配置文件,或修改了 package.json 配置文件,必须重启实时打包的服务器,否则最新的配置文件无法生效

webpack中的loader

loader作用

实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块,
webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!
loader 加载器的作用:协助 webpack 打包处理特定的文件模块。比如:
⚫ css-loader 可以打包处理 .css 相关的文件
⚫ less-loader 可以打包处理 .less 相关的文件
⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

打包处理css文件

① 运行 npm i style-loader css-loader -D 命令,安装处理 css 文件的 loader。

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

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

其中,test 表示匹配的文件类型, use 表示对应要调用的 loader
注意:
⚫ use 数组中指定的 loader 顺序是固定的
⚫ 多个 loader 的调用顺序是:从后往前调用

打包处理less文件

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

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

module.exports={ 
     module:{
        rules:[
            { test:/\.less$/,use:['style-loader','css-loader','less-loader']}
        ]
    }
}
打包处理样式表中与url路径相关的文件

① 运行 npm i url-loader file-loader -D 命令

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

module.exports={ 
     module:{
        { test:/\.jpg|png|git$/,use:'url-loader?limit=22229'}
        ]
    }
}

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

loader参数项的另一种配置
{
                 test:/\.jpg|png|gif/,
                 options:{
                    limit:22229
                 }
 }
打包js文件中的高级语法-babel-loader

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理

安装loader

npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D

配置loader

webpack.config.js modules-rules数组中添加loader规则

{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-proposal-class-properties'],
        },
      },
    },

打包发布

项目开发完成之后,使用 webpack 对项目进行打包发布的主要原因有以下两点:
① 开发环境下,打包生成的文件存放于内存中,无法获取到最终打包生成的文件
② 开发环境下,打包生成的文件不会进行代码压缩和性能优化
为了让项目能够在生产环境中高性能的运行,因此需要对项目进行打包发布。

配置webpack的打包发布

在 package.json 文件的 scripts 节点下,新增 build 命令如下

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

–model 是一个参数项,用来指定 webpack 的运行模式。production 代表生产环境,会对打包生成的文件
进行代码压缩和性能优化。
注意:通过 --model 指定的参数项,会覆盖 webpack.config.js 中的 model 选项。

JavaScript文件统一输出目录
output:{
      path: path.join(__dirname,'./dist'),//输出文件的存放路径
      filename: 'js/bundle.js' //输出文件的名称
  },
图片统一生成image目录中

修改 webpack.config.js 中的modules-rules下的 url-loader 配置项,新增 outputPath 选项即可指定图片文件的输出路径:

{ test:/\.jpg|png|git$/,
             use:{
                loader:'url-loader',
                options:{
                   limit:22228,
                   outputPath:'image'
                }

               }
           },
自动清理dist目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件,可以安装并配置 clean-webpack-plugin 插件
安装: npm install clean-webpack-plugin
配置:
定义:

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const cleanPlugin=new CleanWebpackPlugin()

配置到plugins插件中

plugins:[htmlPlugin,cleanPlugin],

Source Map

解决的问题

前端项目在投入生产环境之前,都需要对 JavaScript 源代码进行压缩混淆,从而减小文件的体积,提高文件的加载效率。此时就不可避免的产生了另一个问题:对压缩混淆之后的代码除错(debug)是一件极其困难的事情
⚫ 变量被替换成没有任何语义的名称
⚫ 空行和注释被剔除

什么是Source Map

Source Map 就是一个信息文件,里面储存着位置信息。也就是说,Source Map 文件中存储着代码压缩混淆前后的对应关系。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试。

webpack 开发环境下的 Source Map

在开发环境下,webpack 默认启用了 Source Map 功能。当程序运行出错时,可以直接在控制台提示错误行的位置,并定位到具体的源代码。

默认 Source Map 的问题

开发环境下默认生成的 Source Map,记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

解决默认 Source Map 的问题
module.exports = {
  // eval-source-map 仅限在开发模式下使用
  // devtool: 'eval-source-map',
  // 生产环境下,建议关闭 SourceMap 或将 devtool 的值设置为 nosources-source-map
  }
webpack 生产环境下的 Source Map

在生产环境下,如果省略了 devtool 选项,则最终生成的文件中不包含 Source Map。这能够防止原始代码通 过 Source Map 的形式暴露给别有所图之人。

只定位行数不暴露源码

在生产环境下,如果只想定位报错的具体行数,且不想暴露源码。此时可以将 devtool 的值设置为: nosources-source-map。

定位行数且暴露源码

在生产环境下,如果只想定位报错的具体行数,且不想暴露源码。此时可以将 devtool 的值设置为: nosources-source-map。
采用此选项后:你应该将你的服务器配置为,不允许普通用户访问 source map 文件!

Source Map最佳实践

① 开发环境下:
⚫ 建议把 devtool 的值设置为 eval-source-map
⚫ 好处:可以精准定位到具体的错误行
② 生产环境下:
⚫ 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map
⚫ 好处:防止源码泄露,提高网站的安全性

问题记录

执行npm run dev 报错

报错信息:
D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\lib\utils\resolve-command.js:33
return mod(…args);
^
TypeError: Class constructor ServeCommand cannot be invoked without ‘new’
at run (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\lib\utils\resolve-command.js:33:12)
at Command. (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\lib\utils\arg-parser.js:34:58)
at Command.listener [as _actionHandler] (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\node_modules\commander\index.js:426:31)
at Command._parseCommand (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\node_modules\commander\index.js:1002:14)
at Command._dispatchSubcommand (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\node_modules\commander\index.js:953:18)
at Command._parseCommand (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\node_modules\commander\index.js:970:12)
at Command.parse (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\node_modules\commander\index.js:801:10)
at argParser (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\lib\utils\arg-parser.js:164:27)
at runCLI (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\lib\bootstrap.js:11:24)
at Object. (D:\workspace\vscode\webpack-demo\node_modules\webpack-cli\bin\cli.js:24:5)

解决方法:
报错主要是webpack-cli版本问题,中间升级了其他版本也有其它错误,
(node:23000) [DEP0111] DeprecationWarning: Access to process.binding(‘http_parser’) is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)

所以直接都升级到最新版,
命令: npm install webpack webpack-cli -D

为了避免其它版本依赖造成问题,安装时候也都不加版本号,默认使用最新的。

npm run build  提示:[webpack-cli] at least two configurations are required for merge。

将配置:

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

改为:

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --config webpack.config.js --mode production"
  },

执行就可以了,后面发现调整回原来的配置也可以打包成功。暂时没有深究原因,分析可能之前没能正常解析配置文件。

打包输出路径的配置

打包的默认输出路径,以及相关参数配置:https://blog.csdn.net/u012732909/article/details/125278255

备注

IT 内容具有时效性,未避免更新后未同步,请点击查看最新内容:Vue3 学习 -01_前端工程化与 webpack
文章首发于:http://nebofeng.com/2023/07/03/vue3%e5%ad%a6%e4%b9%a0-01_%e5%89%8d%e7%ab%af%e5%b7%a5%e7%a8%8b%e5%8c%96%e4%b8%8ewebpack/文章来源地址https://www.toymoban.com/news/detail-536742.html

到了这里,关于Vue3学习-01_前端工程化与webpack的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3工程化项目搭建

    源码:vue3-quick-start 预览:vue3-quick-start 工程化概述 前端工程化大致可以分为模块化、组件化、规范化和自动化。 规范化 项目目录结构 语法提示 编码风格规范 联调规范 文件命名规范 代码样式规范 git flow 模块化 模块化是指将一个文件拆分成多个相互依赖的文件,最后进行

    2024年02月16日
    浏览(19)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(20)
  • Vue3实战(05)-教你快速搭建Vue3工程化项目

    除了Vue 3这个库,还需Vue 3 最新全家桶。 之前语法演示直接使用script引入Vue 3,从而在浏览器里实现所有调试功能。但实际项目中,使用专门调试工具。在项目上线之前,代码也需打包压缩,并考虑到研发效率和代码可维护性,所以在下面,需建立一个工程化项目实现这些功

    2024年02月08日
    浏览(19)
  • Javaweb基础-前端工程化学习笔记

    变量与模版字符串 let 和var的差别: const和var的差异 1、新增const和let类似,只是const定义的变量不能修改 2、并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。 模板字符串(template string)是增强版的字符串,用反引号(`)标识 1、字符串中可以

    2024年02月20日
    浏览(18)
  • Vue2向Vue3过度核心技术工程化开发和脚手架

    1.1 开发Vue的两种方式 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。 工程化开发模式优点: 提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识

    2024年02月11日
    浏览(17)
  • 前端Vue入门-day03-用Vue实现工程化、组件化开发

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 生命周期 Vue 生命周期 和 生命周期的四个阶段  Vue 生命周期函数(钩子函数) 案例-create的应用 案例-mounted的应用 工程化开发 脚手架 Vue CLI 开发 Vue 的两种方式 基本介

    2024年02月15日
    浏览(21)
  • Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

    Ajax介绍 Axios 案例 前后端分离 前端工程化 环境准备,nodejs安装,D:javaprojectjavawebday03-Vue-Elementday03-Vue-Element资料NodeJS安装文档 Vue项目简介 它本来默认端口号是8080 ,但这就和tomcat冲突了所以修改为7000 Vue项目开发流程 Vue组件库Element pagination分页组件,table表格组件,Dial

    2024年02月05日
    浏览(19)
  • 前端工程化详解——理解与实践前端工程化

    前言: 前端工程化一直是一个老生常谈的问题,不管是面试还是我们在公司做基建都会经常提到前端工程化,那么为什么经常会说到前端工程化,并没有听过后端工程化、Java工程化或者Python工程化呢?我们理解的前端工程化是不是一直都是Webpack的性能调优,或者是一个cli工

    2024年02月02日
    浏览(21)
  • JavaWEB学习笔记(二)------HTTP、Servlet、会话、过滤器、监听器、Ajax、前端工程化

    目录 HTTP HTTP1.1 请求和响应的报文格式 请求报文 响应报文 常见状态响应码 Servlet  静态资源和动态资源 ​编辑  Servlet简介  Servlet开发流程 导入和响应头问题 url-pattern不同写法 url-pattern工作方式 Servlet注解方式配置 Servlet生命周期  Servlet继承结构 Servlet接口 GenerisServlet类 Ht

    2024年01月21日
    浏览(18)
  • 前端工程化-NPM

    NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。 NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代

    2024年02月09日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包