webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用

最新推荐文章于 2024-06-07 17:03:35 发布
最新推荐文章于 2024-06-07 17:03:35 发布
阅读量605 收藏 24
点赞数 20
分类专栏： 程序员 文章标签： webpack 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84435152/article/details/138323210
版权
本文介绍了如何配置webpack以打包vue项目，包括创建vue根实例、安装与配置vue-loader解决vue文件打包问题，以及使用file-loader和url-loader处理图片和css文件。详细讲述了webpack的entry、output设置，以及在遇到不能打包vue文件时，如何借助loader解决。
摘要由CSDN通过智能技术生成

在这里插入图片描述

2 编写vue根实例

创建src目录. 在src目录下创建main.js作为项目的总入口文件

在main.js中, 完成如下操作

  • 创建vue根实例

  • 挂载App组件

1) 安装vue

执行 npm install vue 安装Vue

在这里插入图片描述

会发现在package.json中多了上图所示的内容

2) 创建Vue根实例

编写main.js

在这里插入图片描述

3) 挂载App组件

Step1 编写App.vue文件

在这里插入图片描述

Step2 挂载到根实例

在main.js中, 完成如下操作

  • 导入App组件对象

  • 挂载到Vue根实例

  • 在这里插入图片描述

Step3 使用App标签渲染

在这里插入图片描述

这里的App相当于在components中定义的组件名

3 引入main.js测试

在这里插入图片描述

三. webpack基本配置

最低0.47元/天 解锁文章
2401_84435152
关注
  • 20
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack中的loader配置插件及使用
qq_33524478的博客
06-05 347
根据王红元老师上课内容整理的笔记，后面用CLI应该会方便的多，分享给大家~ 使用webpack之前，需要先下载好node和npm，安装好全局的webpack 这是我把所有操作完成后的目录，配置分离后删除了webpack.config.js文件，本来跟package.json在同一目录下 一、配置 新建webpack.config.js文件，配置出口和入口 const path = require('path'); module.exports = { entry: './src/main.js',
vue入门——webpack配置
魔鬼的归宿
03-19 7189
从零开始搭建Vue 2 环境
Vue基础--webpack介绍以及基础配置
烟渺睿晨的博客
08-12 6130
概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。注意：目前Vue、React等前端项目，基本上都是基于 webpack 进行工程化开发的。在 webpack.config.js 配置文件中，通过entry节点指定打包的入口、通过output节点指定打包的出口。...
VUE-webpack超详细教程
热门推荐
ICanWin_lll的博客
01-21 2万+
一.认识webpack 官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块化和打包两个角度来理解： 模块化： webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
weixin_44784401的博客
01-30 8965
webpack安装和使用及超详细配置一个基本vue项目的全部流程（包括路由、less、引入图片渲染）
webpack loader 从上手到理解系列：vue-loader
chern1992的博客
06-18 956
1 什么是vue-loader 「vue-loader」是一个 webpack 的 loader，它允许你以一种名为单文件组件的格式撰写 Vue 组件。 2 如何使用vue-loader 2.1 安装vue-loader npm install vue-loader vue-template-compiler --save-dev 2.2 配置webapck // webpack.config.js const VueLoaderPlugin = require('vue-loa...
vue+element UI 学习总结笔记（二十）--Webpack配置
wh_xia_jun的专栏
04-24 1529
Webpack: WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 开发环境的启动项目时，实际就是通过webpack打包后启动的，只不过是打包的开发环境. npmrundev的指令，实际执行额命令是npmrunweb...
webpack配置完全指南
JackChan
10-26 2810
webpack配置完全指南
Vue2之webpack篇（二）Loader
申小兮和林小兮的博客宝
04-12 6676
loader处理css、图片、ES6转ES5、打包，分离vue，父子组件传参
webpack实现vue-loader插件
lhove的博客
12-18 387
webpack 从0到1实现基本vue-loader插件。
vue-loader+webpack项目配置
m0_37840862的博客
07-29 2525
1.项目准备 安装之前请确保安装了nodejs和npm，在命令行输入node -v查看是否安装node 在vscode终端里面这是npm的镜像仓库，会提高下面下载的速度 # 配置仓库地址 npm config set registry https://registry.npm.taobao.org # 验证是否成功命令 npm config ls 当验证命令结果如下图，则表示成功了 2.初始化项目 创建空文件夹"webpackVue"，然后用vscode打开，然后打开vscode终端 # 将项目初始化成
Vue脚手架配置webpack（configureWebpack，chainWebpack）
coding...
04-08 8942
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。在vue.config.js文件下配置webpack，其他的就不说了，主要是configureWebpack以及chainWebpack，两个在文件内是可以同时使用的。选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。
vue项目webpack打包配置
weixin_43697548的博客
05-06 4625
基于vue/cli3.0+脚手架搭建Vue项目(12) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(12)前言一、webpack配置1.配置vue.config.js2.配置DllPlugin提高构建和打包速度二、打包验证总结 前言 一、webpack配置 1.配置vue.config.js publicPath: './', outputDir: 'dist', assetsDir:"static", indexPath:'index.html', 2.配置DllPlu.
webpack使用流程和配置
husai20的博客
11-27 1438
Webpack基本使用流程 Webpack配置文件 Webpack插件与加载器使用 webpack服务器开发
VUE2.7项目配置webpack打包-详细操作步骤
最新发布
CC酱写前端的博客
06-07 1945
Webpack是一个打包工具，可以把JS、CSS、Node Module、Coffeescrip、SCSS/LESS、图片等都打包在一起，因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。GitHub为https://github.com/webpack/ webpack。
VUE CLI 配置详解
发渐稀的博客
07-11 1254
每个文件打包后都会出现一个.map文件，.map文件会出现一定的网络安全问题，我们可以通过productionSourceMap进行操作，使打包的文件不在出现.map文件，打包后的文件体积也会减少。官方文档也提到了因为 html 也是我们通过插件生成的，静态资源直接就 inject 进去的，所以，当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false。打包的包（dist）中的index.html文件的目录，默认就是dist的下一级，也就是打包之后的包的根目录。
从零配置webpack-vue项目(1)，万字长文
2401_84091938的博客
04-05 740
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
webpack打包配置文件
08-18
Webpack 的打包配置文件是一个 JavaScript 文件，通常被命名为 webpack.config.js。该文件用于配置 Webpack 的打包规则和选项。 以下是一个示例的 webpack.config.js 文件的基本结构： ```javascript const path = require('path'); module.exports = { // 入口文件配置 entry: './src/index.js', // 输出文件配置 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, // 模块加载器配置 module: { rules: [ // 加载器规则 ] }, // 插件配置 plugins: [ // 插件列表 ], // 其他配置选项 }; ``` 在上述配置文件中，可以根据需要进行以下配置： 1. 入口文件配置（entry）：指定项目的入口文件。可以是单个文件路径，也可以是一个对象，用于多入口文件的配置。 2. 输出文件配置（output）：指定打包后的输出文件的位置和名称。可以通过 path 属性指定输出路径，filename 属性指定输出文件名。 3. 模块加载器配置（module.rules）：用于配置不同类型文件的加载器。可以通过 rules 数组中的每一项来指定对特定类型文件的处理规则，如使用 babel-loader 处理 JavaScript 文件，使用 style-loader 和 css-loader 处理 CSS 文件等。 4. 插件配置（plugins）：用于配置 Webpack 插件。可以通过 plugins 数组中的每一项来添加或配置不同的插件，如 HtmlWebpackPlugin 用于生成 HTML 文件，CleanWebpackPlugin 用于清理输出目录等。 5. 其他配置选项：还有其他一些常用的配置选项，如 resolve 用于配置模块解析规则，devServer 用于配置开发服务器等。 根据项目的需求，可以在 webpack.config.js 中添加适当的配置来满足项目的打包需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值