webpack中文網糾錯

TypeError: CleanWebpackPlugin is not a constructor

中文網寫法：

const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
	plugins: [
		new CleanWebpackPlugin(['dist'])
	]
}

正確寫法：

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
	plugins: [
		// 什麼都不填的話默認刪除webpack output定義的文件夾內的所有文件，即dist文件夾
		new CleanWebpackPlugin()
	]
}

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

中文網寫法：

module.exports = {
	plugins: [
		// 什麼都不填的話默認刪除webpack output定義的文件夾內的所有文件，即dist文件夾
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin.optimize.CommonsChunkPlugin({
     		name: 'common'
    	})
	]
}

正確寫法：

module.exports = {
	plugins: [
		// 什麼都不填的話默認刪除webpack output定義的文件夾內的所有文件，即dist文件夾
		new CleanWebpackPlugin()
	],
	optimization: {
    	splitChunks: {
      		cacheGroups: {
        		commons: {
          			name: 'common',
          			chunks: 'initial',
          			minChunks: 2
        		}
      		}
    	}
  	}
}

中文網寫法：

module.exports = {
	plugins: [
    	new HtmlWebpackPlugin({
      		title: 'Caching'
    	}),
    	new webpack.optimize.CommonsChunkPlugin({
			name: 'manifest'
		})
	]
}

正確寫法：

module.exports = {
	plugins: [
		new HtmlWebpackPlugin({
      		title: 'Caching'
    	})
	],
	optimization: {
		runtimeChunk: {
			name: 'manifest'
		}
  	}
}