最近在学习webpack的时候发现的问题,跟着文档动手发现这个文档确实没有更新最新的写法,因此在此记录下来。 webpack文档
原文档的 webpack.config.js
配置:html
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map', plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }
npm run build
以后报错:webpack
TypeError: CleanWebpackPlugin is not a constructor ...
因而我翻看了插件的npm页面,发现写法已经更新:clean-webpack-plugin
也就是下面我两个注释处修改的写法:es6
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); //const CleanWebpackPlugin = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map', plugins: [ //new CleanWebpackPlugin(['dist']), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }
再次 npm run build
后没有报错,插件运行正常。
上面这样修改配置已经能够知足每次编译清理 dist
目录下的文件了,更多配置能够去插件npm的页面查看说明,上面也贴了连接。web
至于为何要这么写,能够去了解一下ES6的对象的解构赋值。npm