webpack3

//怎么去使用loader呢
// loader：用来处理资源文件,接受一个资源文件作为参数,处理结束后返回一个新的资源(webpack可以处理的)，这个过程就是loader的处理
// 用了loader就可以处理jsx和coffeescript两种webpack不支持的格式
// 特点：可以串联csslaoder styleloader  异步可以在npm下运行   可以接受参数   可以用正则表达式指定后缀名执行某种loader
// 使用loader：
//     直接用require：require("css-loader!")
//     直接写在配置文件中：
//             module:{
//                 loaders:[
//                     {test:/\.jade$/,loaders:"jade"},
//                     {test:/\.css$/,loaders:"style!css"},
//                     {test:/\.css$/,loaders:["style","css"]},
//                 ]
//             }
//     直接使用cli: webpack --module-bind jade --module-bind "css=style!css"
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:"./src/app.js",
    output:{
        path:__dirname+"./dist",
        filename:"js/[name].bundle.js"
    },
    module:{
        loaders:[
         /**首先处理js文件,这个loader需要安装,//安装babel-loader和babel-core:  npm install --save-dev babel-loader babel-core
         可以给loader指定参数：两种方式：
                 1.require中的loader后面跟问号再跟参数
                   require("css-loader?minetype='image/png!./file.png'")
                 2.或者在配置文件中加入query属性,值是加传的参数，也可以在package.json中指定：
        // 第一种：{test:/\.js$/,loader:'babel',query:{presets:['latest']}  }
        // 第二种：在package.json中指定：babel:{"presets": ["lastest"]}  
            然后在webpack.config.js中：
                module.export = {
                    module:{
                        loaders:[
                            {test:/\.js$/,loader:'babel-loader'}
                        ]
                    }
                }
         (指定参数能实现特定的功能：这些指定的属性也是以插件的形式来实现的,如果指定完之后还得安装这个插件
                 把js转换成特定的：
                     es2017 es2016 es2015 react
                 latest：转换成最近全部的)
          **/
           {test:/\.js$/,loader:'babel-loader'}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"index.html",
            inject:"body"
        })
    ]
}