iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >babel7.x和webpack4.x如何配置vue项目
  • 813
分享到

babel7.x和webpack4.x如何配置vue项目

2024-04-02 19:04:59 813人浏览 薄情痞子
摘要

小编给大家分享一下babel7.x和webpack4.x如何配置Vue项目,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.webpack 4.x 插件 extract-text-webp

小编给大家分享一下babel7.x和webpack4.x如何配置Vue项目,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

1.webpack 4.x 插件 extract-text-webpack-plugin

(node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use new api on `.hooks` instead
i 「wds」: Project is running at Http://localhost:8300/
i 「wds」: WEBpack output is served from /
i 「wds」: Content not from webpack is served from F:\private\plugin-insert\dist
F:\private\plugin-insert\node_modules\webpack\lib\Chunk.js:838
        throw new Error(
        ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
  at Chunk.get (F:\private\plugin-insert\node_modules\webpack\lib\Chunk.js:838:9)
  at F:\private\plugin-insert\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
  at Array.forEach (<anonymous>)
  at F:\private\plugin-insert\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
  at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\private\plugin-insert\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:7:1)
  at AsyncSeriesHook.lazyCompileHook (F:\private\plugin-insert\node_modules\tapable\lib\Hook.js:154:20)
  at Compilation.seal (F:\private\plugin-insert\node_modules\webpack\lib\Compilation.js:1231:27)
  at hooks.make.callAsync.err (F:\private\plugin-insert\node_modules\webpack\lib\Compiler.js:541:17)
  at _done (eval at create (F:\private\plugin-insert\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:9:1)
  at _err1 (eval at create (F:\private\plugin-insert\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:32:22)

extract-text-webpack-plugin 提取单独打包CSS文件时报错,官方安装部分的文档只写到了webpack 3,目前还没有webpack 4版本,可以使用 extract-text-webpack-plugin@next 解决,也可以使用 mini-css-extract-plugin 。

mini-css-extract-plugin 插件用法如下:

const MiniCssExtractPlugin = require("mini-css-extract-plugin") ;

const config = module.exports = {

   plugins: [
     new MiniCssExtractPlugin({
      filename: "[name].[chunkhash:8].css",
       chunkFilename: "[id].css"
      })
   ],

   module: {
    rules: [
      {
      test: /\.css$/,
      use: [
         MiniCssExtractPlugin.loader,
          "css-loader"
       ]
     }
    ]
    }
}

module.exports = config

2.babel 升级 6.x 到 7.x

(1) @babel/core

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). 
 If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

没找到 @babel/core ,这里把 babel-core 卸载,并安装 @babel/core 。

npm un babel-core
npm i -D @babel/core

(2) @babel/preset-*

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

将 babel-preset-* 卸载,重新安装 @babel/preset-* ,并且修改 .babelrc 中的 presets

npm:
- babel-preset-env
+ @babel/perset-env

.babelrc:
- "presets": ["env"]
+ "presets": ["@babel/preset-env"]

另,stage-*已弃用

(3) @babel/plugin-*

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: this.setDynamic is not a function
  at PluginPass.pre
  ...

这次是插件了,一样把babel-plugin-*卸载,重新安装@babel/plugin-*

然后修改.babelrc文件

具体的包名可以在 npm仓库 里找

(4) 最终文件

.babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": [
      "@babel/plugin-transfORM-runtime"
  ]
}

package.JSON
"devDependencies": {
  "@babel/core": "^7.1.2",
  "@babel/plugin-transform-runtime": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  "babel-loader": "^8.0.4",
  
  ...
 },
"dependencies": {
  "@babel/runtime": "^7.1.2",
  "vue": "^2.5.17",
  "vue-loader": "^15.4.2",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1",
  "webpack": "^4.22.0",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.10",
  "webpack-merge": "^4.1.4"
  ...
 }

(5) 总结

babel 舍弃了以前的 babel-*-* 的命名方式,改成了 @babel/*-*

修改依赖和 .babelrc 文件后就能正常启动项目了。

3.vue-loader 15.x vueLoaderPlugin

vue-loader was used without the corresponding plugin. 
Make sure to include VueLoaderPlugin in your webpack config.
//两个方式都可以的,随便用一个

const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 或者 

const { VueLoaderPlugin } = require('vue-loader');


plugins: [
  // make sure to include the plugin for the magic
  new VueLoaderPlugin()
]

看完了这篇文章,相信你对“babel7.x和webpack4.x如何配置vue项目”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网node.js频道,感谢各位的阅读!

--结束END--

本文标题: babel7.x和webpack4.x如何配置vue项目

本文链接: https://www.lsjlt.com/news/78839.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • babel7.x和webpack4.x如何配置vue项目
    小编给大家分享一下babel7.x和webpack4.x如何配置vue项目,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.webpack 4.x 插件 extract-text-webp...
    99+
    2022-10-19
  • vue cli 3.x项目如何部署到github pages
    这篇文章主要介绍了vue cli 3.x项目如何部署到github pages,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. vue-r...
    99+
    2022-10-19
  • Vue-CLI 3.X如何部署项目至生产服务器
    这篇文章将为大家详细讲解有关Vue-CLI 3.X如何部署项目至生产服务器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、Nginx服务器文件的配置server&nbs...
    99+
    2022-10-19
  • Vue CLI 3.x如何自动部署项目至服务器
    这篇文章主要为大家展示了“Vue CLI 3.x如何自动部署项目至服务器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue CLI 3.x如何自动部署项目至服...
    99+
    2022-10-19
  • 如何在Vue2.x项目中使用防抖和节流功能
    本篇文章为大家展示了如何在Vue2.x项目中使用防抖和节流功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。vue是什么软件Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它...
    99+
    2023-06-06
  • 如何使用vue项目配置多个代理
    本篇内容主要讲解“如何使用vue项目配置多个代理”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用vue项目配置多个代理”吧!在Vue项目的开发过程中,为了本地调试方便,我们通常会在 vue...
    99+
    2023-06-20
  • vue如何新建项目并配置标准路由
    这篇文章给大家分享的是有关vue如何新建项目并配置标准路由的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。配置路由所有用到的地方总共四步或者说四处1.index.js(src--r...
    99+
    2022-10-19
  • vue项目如何让局域网ip访问配置设置
    目录vue让局域网ip访问配置设置vue局域网使用ip无法访问的解决vue让局域网ip访问配置设置 在开发中,为了让同一局域网的小伙伴,都可以通过IP地址访问到vue-cli搭建的项...
    99+
    2022-11-13
  • 构建vueSSR项目之如何配置node以及vue-cli3
    小编给大家分享一下构建vueSSR项目之如何配置node以及vue-cli3,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言服...
    99+
    2022-10-19
  • vue项目配置代理如何解决跨域问题
    目录Vue项目配置代理1. 这里以axios发请求为例2. 如果发送的请求都以 /abc 开头3. 代理多个接口什么是跨域?配置(vue.config.js)总结Vue项目配置代理 ...
    99+
    2023-01-28
    vue项目配置代理 vue跨域 vue配置代理
  • vue-cli构建的项目如何手动添加eslint配置
    目录package.json里配置添加根目录下添加检测配置js文件.eslintrc.js添加忽略检测配置文件.eslintignorewebpack.base.conf.js ru...
    99+
    2022-11-13
  • 本地Vue项目请求本地Node.js服务器如何配置
    这篇文章主要介绍“本地Vue项目请求本地Node.js服务器如何配置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“本地Vue项目请求本地Node.js服务器如何配置”文章能帮助大家解决问题。1、使用...
    99+
    2023-06-29
  • Vue项目如何设置反向代理和cookie设置问题
    目录Vue设置反向代理和cookie设置项目场景问题描述原因分析解决方案Vue项目使用js-cookie细则什么是js-cookie在项目中进行安装在项目中的入口文件(main.js...
    99+
    2022-11-13
  • vue项目中如何通过cdn引入资源并配置详解
    目录概念作用引用资源及配置1、引入2、配置3、在main.js文件中去除原来的引用总结概念 cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统,当用户向cdn链接请求资源时...
    99+
    2022-11-13
  • vue项目中如何运用webpack动态配置打包多种环境域名
    这篇文章主要介绍vue项目中如何运用webpack动态配置打包多种环境域名,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来...
    99+
    2022-10-19
  • 如何在vue项目中通过配置 webpack-obfuscator实现代码加密混淆
    如何在vue项目中通过配置 webpack-obfuscator实现代码加密混淆?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。安装npm install ...
    99+
    2023-06-06
  • 如何安装和配置pm2实现自动化部署node项目
    小编给大家分享一下如何安装和配置pm2实现自动化部署node项目,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、pm2简介pm2(process manager)是一个进程管理工具,维护...
    99+
    2022-10-19
  • Django项目如何配置Memcached和Redis缓存?选择哪个更有优势?
    目录Memcache缓存第一步:安装Memcached第二步:启动Memcached第三步:pip安装python-memcached第四步:将memcached设为Django缓存...
    99+
    2022-11-12
  • Java Web项目中Android和微信小程序的初始页面如何配置
    这篇文章给大家分享的是有关Java Web项目中Android和微信小程序的初始页面如何配置的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Java Web项目我们在Eclipse里开了Java Web项目之后,R...
    99+
    2023-06-02
  • 【uni-app】详细总结uni-app基础知识和如何配置项目,运行到模拟器和小程序端,附案例和图(建议收藏)
    1- uni-app 简介 1.1 介绍 uni-app 是一个使用 Vue.js 开发所有前端应用的框架。 开发者编写一套代码,可发布到 iOS、Android、H5、以及各种小程序(微信/支付宝...
    99+
    2023-10-25
    小程序 uni-app 微信小程序
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作