webpack打包vue

首先说一下需要的loader的导入吧，其中babel-loader,bable-core,css-loader,style-loader,less-loader,url-loader(引入图片使用)的引入可以直接进入到webpack官网，复制粘贴就行

vue-loader导入命令（npm install vue-loader vue-template-compiler）

这是我此demo中导入的loader代码片段

const path = require('path') //必须有的 主要是引入路径
const VueLoaderPlugin = require('vue-loader/lib/plugin') //必须有的vue-loader 15一下的版本可以没有
module.exports={
  entry:path.join(__dirname,'./src/main.js'), // 要打包的文件路径
  output:{
    path:path.join(__dirname,'./dist'),    // 打包好文件存放地址
    filename:'bundle.js' , //打包好文件的存放地址
    publicPath: 'dist/'   // 给需要打包的图片指定根地址
  },
  plugins:[new VueLoaderPlugin()],
  mode:'development', //设置mode
  module: {
    rules: [
      //   css-loader只负责将css文件进行加载 不进行文件的解析
      //   文件的解析需要引入style-loader(将模块导出的样式添加到dom中)
      //  而且规则是从右边向左进行加载的
      //  less-loader是对css文件进行提前预加载
      {
        test: /\.(css|less)$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jepg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {                // 如果加载的图片尺寸大于limit则打包的时候需要file-loader进行图片的加载处理
              limit: 8000,           // 如果照片尺寸小于limit那么打包的时候会自动将照片打包成base64的照片
              name: 'img/[name].[hash:8].[ext]'   //指定图片打包后的文件夹img以及新名字 截取8为hash值
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader'
        }
      },
      {   // 将es6语法转为es5语法的配置
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'     // 当需要解析template的时候需要注册使用
    }
  }
}

main.js中的主要代码

index.html中的主要代码

App.vue中的主要代码