Question

当我运行npm run build时，我会遇到很多错误，但是当我运行npm run dev时，它运行正常且没有错误。

我尝试将webpack.config.js的公共路径更改为./dist，但这并不能解决。我也尝试安装uglifyjs，但也无济于事。我不知道还能尝试什么。

这是我的webpack.config.js文件

var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: 'build.js'
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

这是我的package.json文件

{

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11",
    "vue-router": "^3.0.6",
    "vuex": "^3.1.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^1.1.4",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.3.1"
  }
}

当我运行npm run build时，它应该创建一个dist文件夹，其中包括在生产模式下运行所需的所有文件。相反，我遇到了这些错误


/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:74
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/pat/Desktop/side/iread/node_modules/webpack/lib/webpack.js:185:10)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/webpack.config.js:75:26)
    at Module._compile (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:115:13)
    at requireConfig (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:117:6)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:122:15)
    at yargs.parse (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:71:45)
    at Object.parse (/Users/pat/Desktop/side/iread/node_modules/yargs/yargs.js:567:18)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:375:3)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:797:12)
    at executeUserCode (internal/bootstrap/node.js:526:15)
    at startMainThreadExecution (internal/bootstrap/node.js:439:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! iread@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the iread@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pat/.npm/_logs/2019-05-23T17_34_37_411Z-debug.log
Patricks-MacBook-Pro:iread pat$ npm run build

> iread@1.0.0 build /Users/pat/Desktop/side/iread
> cross-env NODE_ENV=production webpack --progress --hide-modules

/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:74
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/pat/Desktop/side/iread/node_modules/webpack/lib/webpack.js:185:10)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/webpack.config.js:75:26)
    at Module._compile (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (/Users/pat/Desktop/side/iread/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:115:13)
    at requireConfig (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:117:6)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/utils/convert-argv.js:122:15)
    at yargs.parse (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:71:45)
    at Object.parse (/Users/pat/Desktop/side/iread/node_modules/yargs/yargs.js:567:18)
    at /Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack-cli/bin/cli.js:375:3)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Module.require (internal/modules/cjs/loader.js:663:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/pat/Desktop/side/iread/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:734:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:745:10)
    at Module.load (internal/modules/cjs/loader.js:626:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:566:12)
    at Function.Module._load (internal/modules/cjs/loader.js:558:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:797:12)
    at executeUserCode (internal/bootstrap/node.js:526:15)
    at startMainThreadExecution (internal/bootstrap/node.js:439:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! iread@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the iread@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pat/.npm/_logs/2019-05-23T17_34_58_975Z-debug.log

Answer 1

我猜是因为您没有在Dev构建中使用uglifyJS依赖项，请尝试运行npm安装，然后再次尝试构建

编辑：检查一下 https://github.com/wuweijia/wuweijia.github.io/issues/46

Answer 2

尝试运行以下命令

npm install uglifyjs-webpack-plugin --save

Answer 3

经过一番挖掘，我终于弄明白了。在我的webpack.config.js中，我更改了

new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

对此

optimization: {
    minimizer: [new UglifyJsPlugin()],
  },

问题是我在不删除旧的新webpack.optimize.UglifyJsPlugin的情况下添加了最小化器。我从他们的documentation

中找到了答案

npm run build在我的vue cli项目中抛出错误，但是npm run dev可以正常工作

3 个答案: