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中的主要代碼