webpack初始化vue项目(二)

第二章主要介绍wepack.config.js的配置
和相关依赖的下载

第一章中我们只装了vue-loader模块，用来识别vue文件

rules:[
            {//让webpack识别vue模板
                test:/.vue$/,
                loader:'vue-loader'
            }
        ]

我们还需要装一些常用的模块

1.样式加载模块

test:/.css$/,
   use:[
         'style-loader',
         'css-loader'
   ]

需要安装 style-loader

2.图片处理模块
url-loader基于file-loader
将设定大小内的图片转成Base64位的，减少http请求

test:/\.(gif|jpg|jpeg|svg)$/,
      use:[
          {
               loader:'url-loader',
               options:{
                     limit:1024,//1M内转base64
                      name:'[name].[ext]' //名字+扩展名
                  }
            }
       ]

需要安装url-loader，file-loader

3.处理stylus(less/sass原理一样)

 test:/\.style/,
        use:[
            'style-loader',
             'css-loader',
             'stylus-loader'
         ]

需要安装stylus-loader，stylus

rules:[
            {//让webpack识别vue模板
                test:/.vue$/,
                loader:'vue-loader'
            },
            //样式
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            //图片转base64
            {
                test:/\.(gif|jpg|jpeg|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1024,
                            name:'[name].[ext]'
                        }
                    }
                ]
            },
            //处理stylus
            {
                test:/\.style/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]

还有别的，以后会慢慢补充