自学webpack历程01

配置：

const path=require('path');
module.exports={
    //入口：有且可以有多个
    entry:{
        // main:['babel-polyfill',path.resolve(__dirname,'../src/main.js')]
        main:['core-js/fn/promise',path.resolve(__dirname,'../src/main.js')]  //babel-polyfill的一种
    },
    mode:'development',//模式 开发还是生产
    output:{//只能为一个
        filename:'[name]-bundle.js',
        path:path.resolve(__dirname,'../dist'),
        publicPath:'/'//公开的路径
    },
    //本地服务器
    devServer:{
        contentBase:"dist",//服务器默认打开的页面
        overlay:true//报错日志再页面显示
    },
    module:{
        rules:[//loader 从右像左读取
            //css loader 
            {
                test:/\.css$/,
                use:[
                    {
                        loader:'style-loader'  //使用<style>将css-loader内部样式注入到我们的HTML页面
                    },
                    {
                        loader:'css-loader' //加载.css文件
                    }
                ]
            },
            //html loader
            {
                test:/\.html$/,
                use:[
                    {//读取文件loader
                        loader:'file-loader',
                        options:{
                            name:"[name].html"   //起名字
                        }
                    },
                    {
                        loader:'extract-loader'  //将此文件和bundle区分开
                    },
                    {
                        loader:'html-loader',    //加载.html文件
                        options:{
                            attrs:["img:src"]
                        }
                    }
                ]
            },
            {
                test:/\.(jpg|png|jpeg)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:"images/[name]-[hash:8].[ext]"
                        }
                    }
                ]
            },
            //js loader
            {
               test:/\.js$/, 
               use:[
                   {
                       loader:'babel-loader' //转化es2015
                   }
               ],
               exclude:/node_modules/    //除了某些文件
            }
        ]
    }
}