webpack配置踩坑与解决方案-CSDN博客

在使用webpack过程中遇到几个常见错误：Error关于Plugin/Preset导出对象限制、VueLoaderPlugin未引入、htmlwebpackPlugin未定义及UglifyJsPlugin不再支持。解决方法包括更新babel依赖、添加VueLoaderPlugin、修正htmlWebpackPlugin驼峰命名，以及在optimization中配置UglifyJsPlugin。

读书破万卷，下笔如有神；不解其中意，霸葛找上门。 -- 尽信书则不如无书

上第一个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
                    }
                }
            })
        ]
    }
});