码迷,mamicode.com
首页 > Web开发 > 详细

babel 7.x 和 webpack 4.x 配置vue项目

时间:2019-03-07 14:18:39      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:tor   without   .com   eset   stage   actor   sele   install   function   

很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互。按照之前运行非常流畅的配置走一遍,打包遇到各种坑。只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了。看来每日沉迷项目,已经跟不上节奏了。这里记录一下遇到的问题以及解决方案。

 

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()
]

参考资料

升级指南 Upgrade to Babel 7
Setting up a Vue.js Project with webpack 4 and Babel 7
使用 Webpack 4 和 Babel 7 从头开始创建 React 应用程序

 

babel 7.x 和 webpack 4.x 配置vue项目

标签:tor   without   .com   eset   stage   actor   sele   install   function   

原文地址:https://www.cnblogs.com/bill89/p/10489174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!