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+
    2024-04-02
  • vue2.x 从vue.config.js配置到项目优化
    目录前言vue.config.js配置选项打包优化,减小包的大小图片视频压缩js代码压缩cdn加速首屏加载时间优化路由懒加载优化gzip压缩优化参考文献vue.config.js 是...
    99+
    2024-04-02
  • vue cli 3.x项目如何部署到github pages
    这篇文章主要介绍了vue cli 3.x项目如何部署到github pages,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. vue-r...
    99+
    2024-04-02
  • 如何构建webpack+es6+angular1.x项目
    这篇文章给大家分享的是有关如何构建webpack+es6+angular1.x项目的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。技术栈概述ES2015(ES6)大名ES2015,...
    99+
    2024-04-02
  • Vue cli如何生成Vue项目的webpack4升级
    小编给大家分享一下Vue cli如何生成Vue项目的webpack4升级,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!概述相比于...
    99+
    2024-04-02
  • Vue-CLI 3.X如何部署项目至生产服务器
    这篇文章将为大家详细讲解有关Vue-CLI 3.X如何部署项目至生产服务器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、Nginx服务器文件的配置server&nbs...
    99+
    2024-04-02
  • Vue CLI 3.x如何自动部署项目至服务器
    这篇文章主要为大家展示了“Vue CLI 3.x如何自动部署项目至服务器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue CLI 3.x如何自动部署项目至服...
    99+
    2024-04-02
  • vue3.x项目降级到vue2.7如何解决
    今天小编给大家分享一下vue3.x项目降级到vue2.7如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。把 vue3 ...
    99+
    2023-07-05
  • nginx如何配置x-forwarded-for头部
    目录nginx配置x-forwarded-for头部这里配置了nginx的监听端口为50001总结nginx配置x-forwarded-for头部 本地用tomcat起了一个j2ee...
    99+
    2023-01-06
    nginx配置x-forwarded-for头部 nginx配置x-forwarded-for nginx x-forwarded-for头部
  • webpack4如何打包vue前端多页面项目
    这篇文章主要介绍webpack4如何打包vue前端多页面项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.用法项目结构如下:project  |- bulid...
    99+
    2024-04-02
  • 如何在Vue2.x项目中使用防抖和节流功能
    本篇文章为大家展示了如何在Vue2.x项目中使用防抖和节流功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。vue是什么软件Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它...
    99+
    2023-06-06
  • vue 2.x中axios如何封装get和post方法
    这篇文章主要介绍vue 2.x中axios如何封装get和post方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue 2.x axios 封装的get 和post方法impor...
    99+
    2024-04-02
  • centos 6.x 7.x防火墙如何开启端口范围IP地址及进行配置
    centos 6.x 7.x防火墙如何开启端口范围IP地址及进行配置,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。#centos 6.x#在开启防火墙的情况下打开nf...
    99+
    2023-06-05
  • 如何使用vue项目配置多个代理
    本篇内容主要讲解“如何使用vue项目配置多个代理”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用vue项目配置多个代理”吧!在Vue项目的开发过程中,为了本地调试方便,我们通常会在 vue...
    99+
    2023-06-20
  • vue如何新建项目并配置标准路由
    这篇文章给大家分享的是有关vue如何新建项目并配置标准路由的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。配置路由所有用到的地方总共四步或者说四处1.index.js(src--r...
    99+
    2024-04-02
  • idea如何配置tomcat项目
    配置Tomcat项目需要以下步骤: 下载和安装Tomcat服务器:首先需要下载Tomcat服务器,并按照官方文档中的指导进行安装...
    99+
    2024-04-08
    idea tomcat
  • Nginx怎么部署vue项目和配置代理
    这篇文章主要讲解了“Nginx怎么部署vue项目和配置代理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Nginx怎么部署vue项目和配置代理”吧!1.nginx安装和启动# 安装...
    99+
    2023-06-20
  • 在Hadoop2.X/YARN环境下如何搭建CentOS7.0系统配置
    这篇文章主要讲解了“在Hadoop2.X/YARN环境下如何搭建CentOS7.0系统配置”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“在Hadoop2.X...
    99+
    2024-04-02
  • vue项目如何让局域网ip访问配置设置
    目录vue让局域网ip访问配置设置vue局域网使用ip无法访问的解决vue让局域网ip访问配置设置 在开发中,为了让同一局域网的小伙伴,都可以通过IP地址访问到vue-cli搭建的项...
    99+
    2024-04-02
  • 构建vueSSR项目之如何配置node以及vue-cli3
    小编给大家分享一下构建vueSSR项目之如何配置node以及vue-cli3,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!前言服...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作