webpack ：invalid configuration object

最近初学webpack,就遇到了很多难题。通常我们都是按照网上查找的教程来一步一步完成构建，但是我发现webpack不同的版本之间语法上存在一定的差异，可能教程是以3.0的版本来讲解的，但是我自己下了一个4.x的版本以后，使用教程来写，各种BUG。

这不，在写完配置文件后，又出现了一个新的问题。

第一个问题：_dirname is not defined.

出现这个问题的原因是在dirname前面有两个下划线，少写了一个，于是加上后，本来以为可以正常运行，虽然解决了这个问题，但是又出现了第二个问题。

第二个问题：invalid configuraion object.前面一大堆大概意思是我的语法与API不相符。中间有一句比较重要：

configuration.module has an unknow property 'loaders'.these property are invalid.

这句话的意思就是说我的语法中引入的‘loaders’这个属性没有定义，估计就是因为在4.x的版本中，这个变量已经被其他变量替代了。经过一番研究，将‘loaders’改为‘rules’,然后重新在命令行中执行webpack,执行成功。

webpack.config.js 代码如下：

var webpack = require('webpack');
module.exports={
	entry:"./APP1.js",
	output:{
		path: __dirname+"/built",
		filename:"bundle.js"
	},
	mode:"development",
	module:{
		rules:[
		{
			test:/\.css$/,
		    loader:"style-loader!css-loader"
		}
		]
	},
	plugins:[
	 new webpack.BannerPlugin('webpack 实例')
	]
};

运行结果如下：