/* 引入操作路徑模塊和webpack */
var path = require(‘path‘);
var webpack = require(‘webpack‘);

module.exports = {
  /* 輸入文件 */
  entry: {
    index:‘./src/main.js‘
  },
  output: {
    /* 輸出目錄，沒有則新建 */
    path: path.resolve(__dirname, ‘./dist‘),
    /* 靜態目錄，可以直接從這裏取文件 */
    publicPath: ‘/dist/‘,
    /* 文件名 */
    filename: ‘build.js‘
  },
  module: {
    rules: [
      /* 用來解析vue後綴的文件 */
      {
        test: /\.vue$/,
        loader: ‘vue-loader‘
      },
      /* 用babel來解析js文件並把es6的語法轉換成瀏覽器認識的語法 */
      {
        test: /\.js$/,
        loader: ‘babel-loader‘,
        /* 排除模塊安裝目錄的文件 */
        exclude: /node_modules/
      },
      /*解析圖片url*/
      {
        test: /\.(png|jpg|gif)$/,
        loader:‘url-loader?limit=8192‘
      },
      /*解析css*/
      {
        test: /\.css$/,
        loader: ‘style-loader!css-loader‘
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)$/,
        loader: ‘url-loader‘
      }
    ]
  },
  resolve: {
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘
    }
  },
  plugins : [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}

webpack打包vue配置