最近初学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 实例')
]
};
运行结果如下: