webpack打包问题，

Question

问题描述

求救！dev可以跑通，build不行，应该只webpack的问题，但是上周能打包，webpack配置也是没有动过的，唯一的是在项目装了iview，但是我尝试了卸载该模块然后再build也是不行，找了很久不知道是哪里出了问题，有没有大佬帮我一下！

相关代码

 building for production...Error processing file: static/css/app.471541b0b8c67987876897230f5daf43.css
(node:15860) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'toLowerCase' of undefined
    at D:\globalmeter\frontend.globalmeter.com\app\static\css\app.471541b0b8c67987876897230f5daf43.css:2912:1
    at hasInherit (D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\lib\canMerge.js:16:39)
    at Array.some (<anonymous>)
    at exports.default (D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\lib\canMerge.js:21:15)
    at D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\lib\decl\boxBase.js:103:44
    at mergeRules (D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\lib\mergeRules.js:53:17)
    at Object.merge (D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\lib\decl\boxBase.js:102:38)
    at D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\index.js:22:19
    at Array.forEach (<anonymous>)
    at D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\index.js:20:28
    at D:\globalmeter\frontend.globalmeter.com\app\node_modules\optimize-css-assets-webpack-plugin\node_modules\postcss\lib\container.js:239:18
    at D:\globalmeter\frontend.globalmeter.com\app\node_modules\optimize-css-assets-webpack-plugin\node_modules\postcss\lib\container.js:135:18
    at Root.each (D:\globalmeter\frontend.globalmeter.com\app\node_modules\optimize-css-assets-webpack-plugin\node_modules\postcss\lib\container.js:101:16)
    at Root.walk (D:\globalmeter\frontend.globalmeter.com\app\node_modules\optimize-css-assets-webpack-plugin\node_modules\postcss\lib\container.js:131:17)
    at Root.walkRules (D:\globalmeter\frontend.globalmeter.com\app\node_modules\optimize-css-assets-webpack-plugin\node_modules\postcss\lib\container.js:237:19)
    at D:\globalmeter\frontend.globalmeter.com\app\node_modules\cssnano-preset-default\node_modules\postcss-merge-longhand\dist\index.js:19:13
    at initializePlugin (D:\globalmeter\frontend.globalmeter.com\app\node_modules\optimize-css-assets-webpack-plugin\node_modules\cssnano\dist\index.js:31:51)
(node:15860) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch().
(rejection id: 1)
(node:15860) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

webpack.base.conf.js

'use strict'  
const path \= require('path')  
const utils \= require('./utils')  
const config \= require('../config')  
const vueLoaderConfig \= require('./vue-loader.conf')  
var webpack \= require("webpack")  
  
function resolve(dir) {  
  return path.join(\_\_dirname, '..', dir)  
}  
  
const createLintingRule \= () => ({  
  test: /\\.(js|vue)$/,  
  loader: 'eslint-loader',  
  enforce: 'pre',  
  include: \[resolve('src'), resolve('test')\],  
  options: {  
    formatter: require('eslint-friendly-formatter'),  
    emitWarning: !config.dev.showEslintErrorsInOverlay  
  }  
})  
  
module.exports \= {  
  context: path.resolve(\_\_dirname, '../'),  
  entry: {  
    app: './src/main.js',  
  },  
  output: {  
    path: config.build.assetsRoot,  
    filename: '\[name\].js',  
    publicPath:  process.env.NODE\_ENV === 'production' ?  
 config.build.assetsPublicPath : config.dev.assetsPublicPath  },  
  resolve: {  
    extensions: \['.js', '.vue', '.json'\],  
    alias: {  
      'vue$': 'vue/dist/vue.esm.js',  
      '@': resolve('src')  
    }  
  },  
  module: {  
    rules: \[  
      // ...(config.dev.useEslint ? \[createLintingRule()\] : \[\]),  
  {  
        test: /\\.vue$/,  
        loader: 'vue-loader',  
        options: vueLoaderConfig  
  },  
      {  
        test: /\\.js$/,  
        loader: 'babel-loader',  
        include: \[resolve('src'), resolve('test'), resolve('node\_modules/webpack-dev-server/client')\],  
        query: {  
          compact: false,  
          presets: \['es2015'\]  
        }  
      },  
      {  
        test: /\\.(png|jpe?g|gif|svg)(\\?.\*)?$/,  
        loader: 'url-loader',  
        options: {  
          limit: 10000,  
          name: utils.assetsPath('img/\[name\].\[hash:7\].\[ext\]')  
        }  
      },  
      {  
        test: /\\.(mp4|webm|ogg|mp3|wav|flac|aac)(\\?.\*)?$/,  
        loader: 'url-loader',  
        options: {  
          limit: 10000,  
          name: utils.assetsPath('media/\[name\].\[hash:7\].\[ext\]')  
        }  
      },  
      {  
        test: /\\.(woff2?|eot|ttf|otf)(\\?.\*)?$/,  
        loader: 'url-loader',  
        options: {  
          limit: 10000,  
          name: utils.assetsPath('fonts/\[name\].\[hash:7\].\[ext\]')  
        }  
      }  
    \]  
  },  
  node: {  
    // prevent webpack from injecting useless setImmediate polyfill because Vue  
 // source contains it (although only uses it if it's native).  setImmediate: false,  
    // prevent webpack from injecting mocks to Node native modules  
 // that does not make sense for the client  dgram: 'empty',  
    fs: 'empty',  
    net: 'empty',  
    tls: 'empty',  
    child\_process: 'empty'  
  },  
  plugins: \[  
    new webpack.optimize.CommonsChunkPlugin('common.js'),  
    new webpack.ProvidePlugin({  
      jQuery: "jquery",  
      $: "jquery"  
  })  
  \]  
}

webpack.dev.conf.js

'use strict'  
const utils \= require('./utils')  
const webpack \= require('webpack')  
const config \= require('../config')  
const merge \= require('webpack-merge')  
const path \= require('path')  
const baseWebpackConfig \= require('./webpack.base.conf')  
const CopyWebpackPlugin \= require('copy-webpack-plugin')  
const HtmlWebpackPlugin \= require('html-webpack-plugin')  
const FriendlyErrorsPlugin \= require('friendly-errors-webpack-plugin')  
const portfinder \= require('portfinder')  
  
const HOST \= process.env.HOST  
const PORT \= process.env.PORT && Number(process.env.PORT)  
  
const devWebpackConfig \= merge(baseWebpackConfig, {  
  module: {  
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })  
  },  
  // cheap-module-eval-source-map is faster for development  
  devtool: config.dev.devtool,  
  
  // these devServer options should be customized in /config/index.js  
  devServer: {  
    clientLogLevel: 'warning',  
    historyApiFallback: {  
      rewrites: \[  
        { from: /.\*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },  
      \],  
    },  
    hot: true,  
    contentBase: false, // since we use CopyWebpackPlugin.  
  compress: true,  
    host: HOST || config.dev.host,  
    port: PORT || config.dev.port,  
    open: config.dev.autoOpenBrowser,  
    overlay: config.dev.errorOverlay  
  ? { warnings: false, errors: true }  
      : false,  
    publicPath: config.dev.assetsPublicPath,  
    proxy: config.dev.proxyTable,  
    quiet: true, // necessary for FriendlyErrorsPlugin  
  watchOptions: {  
      poll: config.dev.poll,  
    }  
  },  
  plugins: \[  
    new webpack.DefinePlugin({  
      'process.env': require('../config/dev.env')  
    }),  
    new webpack.HotModuleReplacementPlugin(),  
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.  
  new webpack.NoEmitOnErrorsPlugin(),  
    // https://github.com/ampedandwired/html-webpack-plugin  
  new HtmlWebpackPlugin({  
      filename: 'index.html',  
      template: 'index.html',  
      inject: true,  
      favicon: 'static/favicon.ico'  
  }),  
    // copy custom static assets  
  new CopyWebpackPlugin(\[  
      {  
        from: path.resolve(\_\_dirname, '../static'),  
        to: config.dev.assetsSubDirectory,  
        ignore: \['.\*'\]  
      }  
    \])  
  \]  
})  
  
module.exports \= new Promise((resolve, reject) => {  
  portfinder.basePort \= process.env.PORT || config.dev.port  
  portfinder.getPort((err, port) => {  
    if (err) {  
      reject(err)  
    } else {  
      // publish the new Port, necessary for e2e tests  
  process.env.PORT \= port  
      // add port to devServer config  
  devWebpackConfig.devServer.port \= port  
  
      // Add FriendlyErrorsPlugin  
  devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({  
        compilationSuccessInfo: {  
          messages: \[\`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}\`\],  
        },  
        onErrors: config.dev.notifyOnErrors  
  ? utils.createNotifierCallback()  
        : undefined  
  }))  
  
      resolve(devWebpackConfig)  
    }  
  })  
})

webpack.prod.conf.js

'use strict'  
const path \= require('path')  
const utils \= require('./utils')  
const webpack \= require('webpack')  
const config \= require('../config')  
const merge \= require('webpack-merge')  
const baseWebpackConfig \= require('./webpack.base.conf')  
const CopyWebpackPlugin \= require('copy-webpack-plugin')  
const HtmlWebpackPlugin \= require('html-webpack-plugin')  
const ExtractTextPlugin \= require('extract-text-webpack-plugin')  
const OptimizeCSSPlugin \= require('optimize-css-assets-webpack-plugin')  
const UglifyJsPlugin \= require('uglifyjs-webpack-plugin')  
  
const env \= process.env.NODE\_ENV \=== 'testing'  
  ? require('../config/test.env')  
  : require('../config/prod.env')  
  
const webpackConfig \= merge(baseWebpackConfig, {  
  module: {  
    rules: utils.styleLoaders({  
      sourceMap: config.build.productionSourceMap,  
      extract: true,  
      usePostCSS: true  
  })  
  },  
  devtool: config.build.productionSourceMap ? config.build.devtool : false,  
  output: {  
    path: config.build.assetsRoot,  
    filename: utils.assetsPath('js/\[name\].\[chunkhash\].js'),  
    chunkFilename: utils.assetsPath('js/\[id\].\[chunkhash\].js')  
  },  
  plugins: \[  
    // http://vuejs.github.io/vue-loader/en/workflow/production.html  
  new webpack.DefinePlugin({  
      'process.env': env  
  }),  
    new UglifyJsPlugin({  
      uglifyOptions: {  
        compress: {  
          warnings: false  
  }  
      },  
      sourceMap: config.build.productionSourceMap,  
      parallel: true  
  }),  
    // extract css into its own file  
  new ExtractTextPlugin({  
      filename: utils.assetsPath('css/\[name\].\[contenthash\].css'),  
      // Setting the following option to \`false\` will not extract CSS from codesplit chunks.  
 // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. // It's currently set to \`true\` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's \`false\`,      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110  
  allChunks: true,  
    }),  
    // Compress extracted CSS. We are using this plugin so that possible  
 // duplicated CSS from different components can be deduped.  new OptimizeCSSPlugin({  
      cssProcessorOptions: config.build.productionSourceMap  
  ? { safe: true, map: { inline: false } }  
        : { safe: true }  
    }),  
    // generate dist index.html with correct asset hash for caching.  
 // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin  new HtmlWebpackPlugin({  
      filename: process.env.NODE\_ENV \=== 'testing'  
  ? 'index.html'  
  : config.build.index,  
      template: 'index.html',  
      inject: true,  
      minify: {  
        removeComments: true,  
        collapseWhitespace: true,  
        removeAttributeQuotes: true  
  // more options:  
 // https://github.com/kangax/html-minifier#options-quick-reference  },  
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin  
  chunksSortMode: 'dependency'  
  }),  
    // keep module.id stable when vendor modules does not change  
  new webpack.HashedModuleIdsPlugin(),  
    // enable scope hoisting  
  new webpack.optimize.ModuleConcatenationPlugin(),  
    // split vendor js into its own file  
  new webpack.optimize.CommonsChunkPlugin({  
      name: 'vendor',  
      minChunks (module) {  
        // any required modules inside node\_modules are extracted to vendor  
  return (  
          module.resource &&  
          /\\.js$/.test(module.resource) &&  
          module.resource.indexOf(  
            path.join(\_\_dirname, '../node\_modules')  
          ) === 0  
  )  
      }  
    }),  
    // extract webpack runtime and module manifest to its own file in order to  
 // prevent vendor hash from being updated whenever app bundle is updated  new webpack.optimize.CommonsChunkPlugin({  
      name: 'manifest',  
      minChunks: Infinity  
  }),  
    // This instance extracts shared chunks from code splitted chunks and bundles them  
 // in a separate chunk, similar to the vendor chunk // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk  new webpack.optimize.CommonsChunkPlugin({  
      name: 'app',  
      async: 'vendor-async',  
      children: true,  
      minChunks: 3  
  }),  
  
    // copy custom static assets  
  new CopyWebpackPlugin(\[  
      {  
        from: path.resolve(\_\_dirname, '../static'),  
        to: config.build.assetsSubDirectory,  
        ignore: \['.\*'\]  
      }  
    \])  
  \]  
})  
  
if (config.build.productionGzip) {  
  const CompressionWebpackPlugin \= require('compression-webpack-plugin')  
  
  webpackConfig.plugins.push(  
    new CompressionWebpackPlugin({  
      asset: '\[path\].gz\[query\]',  
      algorithm: 'gzip',  
      test: new RegExp(  
        '\\\\.(' +  
        config.build.productionGzipExtensions.join('|') +  
        ')$'  
  ),  
      threshold: 10240,  
      minRatio: 0.8  
  })  
  )  
}  
  
if (config.build.bundleAnalyzerReport) {  
  const BundleAnalyzerPlugin \= require('webpack-bundle-analyzer').BundleAnalyzerPlugin  
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())  
}  
  
module.exports \= webpackConfig

Answer 1

去掉OptimizeCSSPlugin相关的配置即可，应该是这个包没有做版本兼容导致的。