配置加载器.md

配置加载器

npm安装相关包到开发依赖，包括babel、vue-loader等。

npm install babel-core -save-dev
npm install babel-loader -save-dev
npm install babel-runtime -save-dev
npm install babel-plugin-transform-runtime -save-dev
npm install babel-plugin-transform-object-assign -save-dev
npm install babel-preset-es2015 -save-dev
npm install vue -save-dev
npm install vue-loader -save-dev

如果是使用的vue-cli安装，请安装以下依赖：

npm install babel-runtime -save-dev
npm install babel-plugin-transform-runtime -save-dev
npm install babel-plugin-transform-object-assign -save-dev

配置webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: './build/app.js', //入口文件
  output: {
    path: './src/javascripts/', //输出目录
    filename: 'app.min.js', //输出文件名
    publicPath: './src/javascripts/' //文件中引用的输出文件链接地址
  },
  module: {
    loaders: [
      { //vue单页组件解析
        test: /\.vue$/,
        exclude: /(node_modules)/,
        loader: 'vue'
      },
      { //babel解析器(es6语法，Object.assign语法)
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-object-assign']
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"development"' //开发环境设置为development
      }
    })
  ]
}

至此，webpack相关的配置完成。