babel7.x和webpack4.x如何配置vue项目
小编给大家分享一下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项目”有了一定的了解,如果想了解更多相关知识,欢迎关注编程网行业资讯频道,感谢各位的阅读!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341