webpack.config.js配置

![Uploading 04 - 轮播组件抽取过程碰到的问题梳理 _729758.png . . .]

webpack.config.js配置

module.exports={
    // 1.0 定义打包的入口文件路径
    entry:'./src/main.js',
    output:{
        path:'./src',   //打包以后的文件存放目录
        filename:'build.js'  // 打包以后生成的文件名称
    },
    module:{
        loaders:[
            {
                // 将当前项目中所有的.js文件都要进行es6转es5操作，node_moudels除外
                test:/\.js$/,   //表示当前要打包的文件的后缀正则表达式
                // loader:'babel-loader?presets[]=es2015', //如果写到这里，将来在打包.vue文件的时候会报错，表示先利用css-loader解析.css文件，再调用style-loader打包
                loader:'babel-loader',
                exclude:/node_modules/  //node_modules中的所有.js文件不去转换，提高打包性能
            },
            {
                // 打包css文件
                test:/\.css$/,   //表示当前要打包的文件的后缀正则表达式
                loader:'style-loader!css-loader' //表示先利用css-loader解析.css文件，再调用style-loader打包
            },
            {
                // 打包 sass文件
                test:/\.scss$/,   //表示当前要打包的文件的后缀正则表达式
                loader:'style-loader!css-loader!sass-loader' //实现sass文件的打包
            },
            {
                // 打包less文件
                test:/\.less$/,   //表示当前要打包的文件的后缀正则表达式
                loader:'style-loader!css-loader!less-loader' //实现sass文件的打包
            },
            {
                // 打包url()请求的资源文件
                test:/\.(png|jpg|gif|ttf)$/,   // 注意url可能请求多个资源，所以将来在项目中通过url导入的资源扩展名必须配置在这里
                // loader:'url-loader'  //这种配置会将图片变成一个base64的字符串存储到build.js中，如果图片很大的话，那么会造成build.js也比较大，加载的时候会导致效率低下
                loader:'url-loader?limit=40000' //限制图片的大小如果<40k则把他当做base64字符串存储到build.js中，如果>40k 则单独将图片存放到磁盘上，将路径打包进去bulid.js 
            }
        ]
    },
    babel:{
         presets: ['es2015'],  
         plugins: ['transform-runtime']  //这句代码就是为了解决打包.vue文件不报错
    }

}