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

小編給大家分享一下babel7.x和webpack4.x如何配置vue項目，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都網(wǎng)站設(shè)計、網(wǎng)站制作,成都做網(wǎng)站公司-成都創(chuàng)新互聯(lián)公司已向上千家企業(yè)提供了,網(wǎng)站設(shè)計,網(wǎng)站制作,網(wǎng)絡(luò)營銷等服務(wù)!設(shè)計與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗,合理的價格為您打造企業(yè)品質(zhì)網(wǎng)站。

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) 總結(jié)

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項目”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站名稱：babel7.x和webpack4.x如何配置vue項目
標題網(wǎng)址：http://www.muchs.cn/article34/ghpope.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站營銷、移動網(wǎng)站建設(shè)、Google、外貿(mào)網(wǎng)站建設(shè)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)