读书破万卷,下笔如有神;不解其中意,霸葛找上门。 -- 尽信书则不如无书
上第一个bug:babel
Error: Plugin/Preset files are not allowed to export objects, only functions
原因: babel 的版本冲突 | babel 依赖包不兼容。
"@babel/cli": "^7.10.3", "@babel/core": "^7.10.3", "@babel/plugin-transform-runtime": "^7.10.3", "@babel/preset-env": "^7.10.3", "babel-loader": "^8.1.0", "babel-preset-es2015": "^6.24.1", "babel-runtime": "^6.26.0",
.babelrc 文件
{ "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugin-transform-runtime" ], "comments": false }
bug two :
webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin
原因: Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = {
... plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ], module : { ... } }
bug 3:
ERROR in Template execution failed: ReferenceError: htmlwebpackPlugin is not defined
原因: 驼峰命名
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>webpack App</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="<%= htmlwebpackPlugin.files.css[0] %>"> </head> <body> <div id="app"></div> <script type="text/javascript" src="<%= htmlwebpackPlugin.files.js[0] %>"></script> </body> </html>
解决方法:
ejs文件配置中得htmlwebpackPlugin修改为htmlWebpackPlugin
bug4:
webpack.optimize.UglifyJsPlugin has been removed, please use config.optimiza
原因:报错的原因是webpack4已经升级不支持这种写法了,也就是说不在plugins里面进行操作。而是放在了optimization里面,写法不变下面贴代码
解决方法:
运行 npm install --save-dev uglifyjs-webpack-plugin 安装uglifyjsPlugin
...... const UglifyJsPlugin=require('uglifyjs-webpack-plugin'); // 清空基本配置的插件列表 webpackBaseConfig.plugins=[]; module.exports=merge(webpackBaseConfig,{ output:{ publicPath:'/dist/', // 将入口文件重命名为带有20位hash值得唯一文件 filename:'[name].[hash].js' }, plugins:[ ...... ], optimization:{ minimizer:[ new UglifyJsPlugin({ uglifyOptions: { output: { comments: false }, compress: { drop_debugger: true, drop_console: true } } }) ] } });