webpack 4.12.0 92% chunk asset optimization UglifyJSPlugin

Question

在阿里云ECS部署的nodejs环境，运行npm run dev可以 但是运行prod就会卡死在这里，windows环境完全是可以的，不知道问题出在哪了

这是我的webpack.base.conf.js
'use strict'
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')

function _resolve (dir) {
return path.join(__dirname, '..', dir)
}

const config = {
entry: {},
output: {},
resolve: {

extensions: ['.js', '.scss', '.pug', '.json'],
alias: {
    'src': _resolve('src'),
    'api': _resolve('src/api'),
    'common': _resolve('src/common'),
    'includes': _resolve('src/includes'),
    'config': _resolve('config'),
}

},
module: {

rules: [
  {
      test: /\.js$/,
      loader: 'babel-loader',
      include: _resolve('src'),
      exclude: _resolve('node_modules'),
      query: {
          presets: ['latest']
      }
  },
  {
      test: /\.pug$/,
      loader: 'pug-loader',
      include: _resolve('src'),
      exclude: _resolve('node_modules')
  },
  {
      test: /\.css$/,
      loader: 'style-loader!css-loader!postcss-loader',
      exclude: _resolve('node_modules'),
      include: _resolve('src')
  },
  {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      loader: 'url-loader',
      options: {
          limit: 10000,
          name: 'img/[name]-[hash:5].[ext]'
      },
      exclude: _resolve('node_modules'),
      include: _resolve('src')
  },
  {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
          limit: 10000,
          name: 'fonts/[name]-[hash:5].[ext]'
      },
      exclude: _resolve('node_modules'),
      include: _resolve('src')
  },
  {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      loader: 'url-loader',
      options: {
          limit: 10000,
          name: 'media/[name]-[hash:5].[ext]'
      },
      exclude: _resolve('node_modules'),
      include: _resolve('src')
  }
]

},
plugins: []
}

function getEntries(globPath) {

var files = glob.sync(globPath)
    ,entries = {}

files.forEach(filePath => {
    var pathSplitS = filePath.split('/')
        ,name = pathSplitS[pathSplitS.length -2]
    entries[name] = './' + filePath
})
return entries

}

var entries = getEntries('src/views/**/index.js')
Object.keys(entries).forEach(name => {

config.entry[name] = entries[name]
var plugin = new HTMLPlugin({
    filename: name + '.html',
    template: 'index.html',
    inject: true,
    chunks: [name],
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
    }
})
config.plugins.push(plugin)

})

module.exports = config

这是webpack.config.prod.js
const webpack = require('webpack')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const merge = require('webpack-merge')
const baseConfig = require('../config/index.js')

var _resolve = function (dir) {

return path.join(__dirname, '..', dir)

}

module.exports = merge(baseWebpackConfig, {

output: {
    path: _resolve('dist'),
    filename: 'js/[chunkhash:8].js'
 },
module: {
    rules: [
          {
          test: /\.(scss|sass)$/,
          use: [
              {
                  loader: MiniCssExtractPlugin.loader,
                  options: {
                      publicPath: '../'
                  }
              },
              "css-loader?importLoaders=1",
              "postcss-loader",
              "sass-loader"
          ],
          include: _resolve('src')
      }
    ]
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.DefinePlugin({
        'process.env.baseUrl': baseConfig.build.env.baseUrl
    }),
    new MiniCssExtractPlugin({
      filename: "css/[chunkhash:8].css"
    })
]

})

package.json 脚本
"build:dev": "webpack-dev-server --config ./build/webpack.config.dev.js --progress",

"build:prod": "webpack --config ./build/webpack.config.prod.js --progress"

Answer 1

我也是这个问题, 有人知道吗!

================================

2019-02-12 暂时解决了!

问题

wsl中编译webpack会卡住, 因为wsl多线程问题.

解决办法

编辑webpack的配置文件:

{
  ...,
  optimization: {
    minimizer: {
        new TerserPlugin({
            // 将多线程关闭
            parallel: false
        })
    },
  },
}

脚注

• Compile stuck at optimize chunk assets
• Webpack 4 irregularly spikes CPU at 93% "after chunk asset optimization" during hot reload rebuild
• Webpack build hangs with parallel: true
• Build with "–mode production" hangs on Windows Subsystem for Linux (WSL)

Answer 2

接楼上，如果你是vue.config.js，那么尽量不要在开发模式打开下面这个配置项
config.optimization.minimize(true) //压缩代码的，不要添加就行，不然开发每次保存卡到爆