vue Webpack 的相关内容

文章 2022-12-09 来自：开发者社区

【Vue】webpack的基本使用

webpack的学习目标理解什么是前端工程化转变对前端开发的认知了解webpack的基本用法为后面Vue和React课程的学习做技术储备不强制要求大家能手动配置 webpack一定要知道webpack在项目中有什么作用清除webpack中的核心概念前端工程化小白眼中的前端开发 vs 实际的前端开发小白眼中的前端开发会写HTML + CSS +JavaScript就会前端开发需要美化页面样式，就....

文章 2022-11-29 来自：开发者社区

vue挂载运行webpack打包好dist的文件

const express = require('express') const app = express() const port = 8012 // 自定义端口号（不要与已存在端口冲突） app.use(express.static('dist')) // dist 是项目的打包资源路径 app.listen(port, () => console.log(`服务器 ${port} ....

文章 2022-10-09 来自：开发者社区

全栈开发实战｜Vue进阶——使用静态模块打包工具webpack

01、webpack介绍webpack根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。图1是来自webpack官方网网站（https://webpack.js.org/）的模块化示意图。图1的左边是业务中编写的各种类型文件，例如typescript、jpg、less、css。这些类型的文件通过特定的加载器（Loader）编译后，最终统一生成.js、.css、.jp....

文章 2022-10-01 来自：开发者社区

一幅长文细学Vue（一）——Webpack的使用

1 项目开发工具摘要在本文中，我们会详细讨论webpack是如何打包发布项目，不过对于Vue来说，Vite可以做到和webpack一样的功能。声明：如果想要看懂此文章，需具备node.js中npm的知识。作者：来自ArimaMisaki创作[TOC]1.1 webpack工具1.1.1 什么是webpack说明：目前企业级的前端项目开发中，绝大多数的项目都是基于Webpack进...

文章 2022-09-24 来自：开发者社区

Vue CLi3 修改webpack配置

审查项目的 webpack 配置因为 @vue/cli-service 对 webpack 配置进行了抽象，当你想查看webpack的配置时可以使用 inspect命令：vue inspect # 在终端打印 webpack配置信息vue inspect > output.js # 把webpack配置信息生成到output.js文件注意，output.js 文件不是一个有效的 webpa....

文章 2022-09-14 来自：开发者社区

vue@2 使用 svg-icon：webpack + svg-sprite-loader

vue@2 使用 svg-icon：webpack + svg-sprite-loader项目结构$ tree -I node_modules . ├── README.md ├── package.json ├── pnpm-lock.yaml ├── public │ ├── index.html │ └── libs │ └── vue@2.6.14.min.js ├─...

文章 2022-08-07 来自：开发者社区

Vue课程25-配置和使用clean-webpack-plugin

const path = require('path') // 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // 2. new 构造函数，创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页...

文章 2022-08-07 来自：开发者社区

Vue课程20-介绍webpack处理样式的过程

文章 2022-08-07 来自：开发者社区

Vue课程14-webpack中的loader

//导入jquery import $ from 'jquery' //定义jquery的入口 import './index.css' $(function(){ $('li:odd').css('background-color','red') $('li:even').css('background-color','pink') })