var htmlWebpackPlugin = require('html-webpack-plugin');//引用plugin，引用目的见自动生成html的文见
var path=require('path')//nodejs提供的获取路径的方法
//commonjs的模块化输出
module.exports = {
//context:,//运行环境的上下文，默认值为我们 运行该脚本的目录,我此处是根目录所以不需要写，如果你的不是请配置你的运行目
entry: './src/script/main.js',//打包的入口
//entry:['./src/script/main.js','./src/script/a.js'],//表示将两个文件打包在一起
//entry:{
main:'./src/script/main.js',
a:'./src/script/a.js',
b:'./src/script/b.js',
c:'./src/script/c.js',
}, //如果output写的输出文件是一个的话，这种写法 还是会打包在一个文件里
output:{ //打包后的文件放在什么地方
path:'./dist/js',
//path:'dist', 将html文件输出到dist目录下
//filename:'js/[name]-[chunkhash].js', //将生成的js文件 输出到js目录下
filename:'bundle.js' //打包后的文件名
//filename:'[name]-[hash].js', //hash是指本次打包的hash
//filename:'[name]-[chunkhash].js',
publicPath:'static/dist'//上线后，引用的打包路径
},
plugins:[//使用引用的plugin
new htmlWebpackPlugin({
filename：'index-[hash].html', //生成的html的 名字,如果每次生成都带hash我们会很难查看哪个是最新生成的，所以我们一般的写法都是'index.html'
template:'index.html', //你想让生成的文件被那个html引用这里就写哪个
inject:'head', //想把生成的js文件的引用放在什么标签里，这里是放在head标签里
//传递参数，将该参数在界面上引用
title:'hhm is good',
aa:'two',
minify:{
removeComments:true, //删除注释
collapseWhitespace:true//删除空格
drop_debugger: true, // 移除debugger
drop_console: true, // 移除console
pure_funcs: ['console.log','console.info']
//更多的属性可见官网api文档
}
}),
new htmlWebpackPlugin({
filename:'a.html',
template:'index.html',
inject:head,
title:'this is a.html',
//chunks:['a']//指定当前生成的html引入哪些js
excludeChunks:['b','c']//排除b c js 其它的都引入
}),
new htmlWebpackPlugin({
filename:'b.html',
template:'index.html',
inject:head,
title:'this is b.html',
chunks:['b']//指定当前生成的html引入哪些js
}),
new htmlWebpackPlugin({
filename:'c.html',
template:'index.html',
inject:head,
title:'this is c.html',
chunks:['c']//指定当前生成的html引入哪些js
})
],
module:{
loaders:[
{test:/.js$/,
loader:'babel',
exclude:path.resolve(_dirname,'node_modules'),//告诉webpack不想处理的目录，提高打包速度。path.resolve是解析为绝对路径
include:path.resolve(_dirname,'src'),//要处理的目录
query:{ //这段代码也可以写在package.json里
presets:['latest'] //preset是将es6转换成浏览器可理解的js代码
}
},// 告诉浏览器我们处理js的时候 要使用babel，它的presets我们使用latest
{
test:/.css$/,
loader:'style-Loader!css-Loader!postcss-loader'
//处理通过@Import a.css引入css里的文件impotLoaders的值表示我们在css-loader之后还有几个loader要处理，我们这里只有一个postcss-loader，所以这里写1（less中已经帮我们默认的处理了这种情况）
loader:'style-Loader!css-Loader?importLoaders=1!postcss-loader'//style-Loader可简写成style，其它同理
},
{
test:/.less$/,
loader:'style!css!postcss!less' //放置顺序：如果你需要把postcss放在webpack的配置文件中就必须放在style-loader前面和sass或less-loader的后面
},
{
test:/.html$/,
loader:'html'
}，
{//只要是添加了图片的loader，不管是样式中的引用还是界面上的引用它会被处理
test:/.(png|jpg|gif|svg)$/i,
loader:'file-loader', //如果图片很多建议用这个
//loader:'url-loader',
//loaders:[ //如果这样写下面的query就要去掉
'url-loader?limit=2000$name=img/[name]-[hash:5].[ext]',
'image-webpack'
]
query:{ //图片打包后的输出目录
//limit:20000,
name:'img/[name]-[hash:5].[ext]'
}
}
]
},
postcss:[ //处理不容易被浏览器解析的css
require('autoprefixer')({
broswers：['last 5 versions'] //对浏览器的版本进行处理
})
]
}