vue.js第五天

一、loader

1.less文件的处理

1.安装

npm install less-loader --save-dev less

2.配置

{
        test: /\.less$/,
        use: [
          {loader: 'style-loader'},
          {loader: 'css-loader'},
          {loader: 'less-loader'},
        ]
      }

2.图片文件处理

1.安装

url-loader 和 file-loader

2.配置

{
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            option: {
              //当加载的图片小于limit时，会将图片转化为data64型的字符串
              //当加载的图片大于limit时，会使用file-loader进行加载，file-loader不需要配置,会在出口处生成一张新的图片来显示
              limit: 13000,
              name: '/img/[name].[hash:8].[ext]',//修改生成的文件在路径下的位置和名称
            }
          }
        ]
      }

output : {//输出文件
      filename : 'bundle.js',//输出文件名
      path : __dirname + '/bind',//输出文件路径，__dirname表示这个js文件的路径
      publicPath: 'dist/'//修改相关url的路径
  },

2.vue的配置

1.安装

npm install vue --save

2.引用

import Vue from 'vue/dist/vue.esm.js'

3.el和template的关系

template和el同时存在时，template的内容会替换掉原来的el绑定的内容

4.封装vue文件

#安装vue的loader 

npm install --save-dev vue-loader vue-template-compiler

#配置vue的loader

{
    test: /\.vue$/,
    use: ['vue-loader']
}

#创建vue文件，在vue文件中写入script ，template ， css

#在main.js中引入vue文件

二、plugin(插件)

1.功能

对webpack的功能进行扩充

2.使用步骤

安装---配置

3.常用插件

BannerPlugin   为代码添加版权协议

HtmlWebpackPlugin    在目标文件夹生成html文件并将打包好的js文件插入

uglifyjs-webpack-plugin    压缩js代码

三、搭建本地服务器

webpack一脸懵逼先放着

四、配置文件的分离

webpack一脸懵逼先放着