Vue 教程(二十七)webpack 配置文件 webpack.config.js

最新推荐文章于 2024-06-16 09:20:23 发布
最新推荐文章于 2024-06-16 09:20:23 发布
阅读量1.7k 收藏
点赞数
分类专栏： # Vue教程
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/yuan_xw/article/details/119512835
版权
本文介绍了Vue教程的第二十七部分，重点讲解webpack配置文件webpack.config.js的创建和使用。通过npm初始化生成package.json，然后配置webpack.config.js，并探讨了两种打包方式。还讨论了本地安装webpack以及package.json中scripts的执行顺序。最后提到了npm run build指令的运行原理。
摘要由CSDN通过智能技术生成

Vue 教程(二十七)webpack 配置文件 webpack.config.js

  1. npm 初始化
  2. webpack.config.js
  3. 开发时依赖

项目配置

  • 在项目根目录下新建 webpack.config.js 文件，配置文件中 path 属性，需要绝对路径，因此需要的初始化 npm 获得 node 中内置的 path 变量，以获得当前绝对路径，命令执行成功后，自动生成：package.json 文件

npm 初始化：npm init

## 包名meet
package name: (webpack) meet
## 版本号
version: (1.0.0)
## 描述
description:
## 入口
entry point: (webpack.config.js)
## test执命令
test command:
## git仓库地址
git repository:
## 关键字
keywords:
## 作者
author:
## 开源协议
license:
最低0.47元/天 解锁文章
_否极泰来_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack搭建vue脚手架
Heartbroken_man的博客
08-31 2411
搞了几天的webpack5.0版本搭建vue脚手架项目，今天分享一下！ 在读这篇文章之前你可能需要了解一些webpack的配置才行 否则可能看不懂部分配置 首先我们的项目的src目录结构如下 基本上与vue-cli3的结构一样 ，你可以直接创建vue-cli3的脚手架直接复制里面的项目目录结构 新增命令行 在package.json文件里面的scripts字段里面新增这样一条命令，这样我们就可以在控制台输入npm run build执行webpack.config.js里面的配置 "bu
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
总之，通过`vue.config.js`配置`copy-webpack-plugin`，我们可以确保`static`文件夹下的静态文件在构建过程中得到正确处理，避免了因未引用而被忽略的问题。这个方法对于处理动态加载的外部数据文件或其他不希望被...
对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置，给不同的编译条件提供配置...
weixin_30824479的博客
03-27 157
当我们需要和后台分离部署的时候，必须配置config/index.js: 用vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置） var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), a...
Vue47-修改默认配置webpack.config.js文件
最新发布
qq_31532983的博客
06-16 378
vue.config.js配置文件
vue.js多页面开发 webpack.config.js 配置方式
weixin_33697898的博客
06-14 310
配置文件代码 var path = require('path') var webpack = require('webpack') var glob = require('glob'); 复制代码得到入口文件 // 源文件目录 var sSystem = 'src/'; // src目录如下 每个文件夹下的.js文件都会打包 components文件夹为组件 // 生成多个入口文件 funct...
webpack--vue.config.js
我不要秃头的博客
12-02 711
webpack的配置项 vue.config.js下，我们对其进行配置 const path = require('path');// 导入path，进行之后的路径拼接 function resolve (dir) { return path.join(__dirname, dir) } // 导出默认配置 module.exports = { chainWebpack: (config) => { // webpack的配置，减少import的vue和element进行外部
webpack、vue.config.js
qq_30351747的博客
09-18 1300
webpack、vue.config.js
vue.config.js完整配置-超详细
05-26
在 Vue 项目中，`vue.config.js` 文件是一个可选的配置文件，它允许开发者自定义项目的各种设置，以满足特定需求。这个文件通常位于项目的根目录下，如果使用了 `@vue/cli` 创建的项目，那么在初始化时该文件可能不...
vue.config.js配置（vue3 + webpack）
11-02
vue.config.js配置（vue3 + webpack）
Vue-cli3项目配置Vue.config.js实战记录
10-18
总结来说，`vue.config.js` 是 Vue CLI 3 中的核心配置文件，它使得开发者能够轻松地自定义 Webpack 配置，以适应各种项目需求。通过理解并熟练使用这些配置选项，你可以优化构建过程，提高开发效率，并确保应用性能...
手把手搭建h5框架,webpack+jq 与webpack +vue
11-21
手把手搭建h5框架,webpack+jq 与webpack +vue。 1.初始化一个npm项目 2.安装pnpm 3.安装webpack webpack-cli 4.新建webpack.config.js配置文件 5.安装babel 详细安装方式，手把手教程见README.md文档
vue项目中vue.config.js中配置webpack详解
wzy_PROTEIN的博客
05-13 2681
vue-cli3以前的版本中把webpack的配置都写在config文件中，可以vue-cli3以上的版本中没有了config目录，可以将配置webpack的文件写在vue.config.js文件里面。是一个可选的配置文件，如果项目的 (和同级的) 根目录中存在这个文件，那么它会被自动加载。你也可以使用中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
webpack配置及vue.config.js
weixin_49834963的博客
05-18 4456
webpack webpack配置 写在前面：官网解释到，webpack 是一个基于node.js的模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package) https://webpack.docschina.org/guides/getting-started/ （练习放在workspce/demo/webpack_demo） 一些基础知识： 入口(entry) ：指示 we
Vue-webpack项目配置详解
Coder_Designer的博客
08-18 1万+
Vue-webpack项目配置详解1、首先我们在构建vue项目后，就得先了解vue的项目结构├── build --------------------------------- webpack相关配置文件 │ ├── build.js --------------------------webpack打包配置文件 │ ├── check-versions.js --------------
webpack.config.js和vue.config.js的区别
seimeii的博客
11-03 7415
webpack.config.js是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue的项目可以使用，react的项目也可以使用。 vue.config.js是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化了配置工作，当然如果需要更专业的配置工作，两者在vue项目中是可以并存的。 vue-cli3创建的时候并不会自动创建vue.config.js,因为这个是可选项，所以一般都是修改webpack的时候才会自己创建一个vue.co
vue-cli配置webpack.config.js
weixin_34343308的博客
03-14 3442
在项目中输入:webpack会报以下错误，就是找不到webpack.config.js这个文件，其实这个文件新建项目的时候是没有的，需要自己去新建 1.在根目录新建文件：webpack.config.js 2.在webpack.config.js中加入以下代码 'use strict' // Template version: 1.3.1 // see http://vuej...
如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件
青春木鱼的博客
07-24 5552
这篇文章主要介绍了Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决，具有很好的参考价值，希望对大家有所帮助
Vue中------webpack.config.js在哪儿
热门推荐
qq_41797053的博客
09-07 3万+
上图是通过Vue init webpack-simple创建的目录，默认没有node-modeules文件，自己下载 上图是vue init webpack 创建的目录，webpack.config.js文件配置到 build=>webpack.base.conf.js文件中，所以没有该文件名称。 网上推荐用中小项目用第一中，大项目用第二种。区别不知道在哪儿，知道的小伙伴望留言...
vue.config.js 文件中webpack配置，webpack 多种应用场景配置, 优化及多页面应用开发
gcyaozuodashen的博客
12-07 1万+
vue cli3 webpack精讲
webpack配置vue.config.js
10-18
好的，关于webpack配置vue.config.js，我可以给你一些基本的信息。vue.config.js是一个可选的配置文件，用于对vue-cli项目进行个性化配置。在这个文件中，你可以对webpack进行一些自定义配置，例如修改webpack的entry和output、添加loader和plugin等等。 下面是一个简单的vue.config.js文件示例： ``` module.exports = { // 修改webpack的entry configureWebpack: { entry: './src/main.js' }, // 添加loader chainWebpack: config => { config.module .rule('markdown') .test(/\.md$/) .use('html-loader') .loader('html-loader') .end() .use('markdown-loader') .loader('markdown-loader') .end() }, // 添加plugin pluginOptions: { foo: { // options for foo plugin } } } ``` 在这个示例中，我们修改了webpack的entry，添加了一个处理markdown文件的loader，并且添加了一个名为foo的plugin。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值