MiThink 记事本

修改npm源：

npm config set registry https://registry.npm.taobao.org

全局安装：

npm install webpack -g

安装组件包：

npm install webpack vue-template-compiler vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install vue --save
npm install vue-router vue-resource --save

Unexpected token import 解决办法

module:{
    // ...
loaders:[
        // ...
        {
            test: /\.js$/,
            loader: 'babel?presets=es2015',
            exclude: /node_modules/
        }
    ]
}

Error: Cannot resolve module 解决办法

module.exports = {
    // ...
    resolve: {
        extensions: ['', '.js', '.vue']
    }
}

各种 vue export 报错

module.exports = {
    // ...
    babel: {
        presets: ['es2015']
    }
}

免去每次生成文件需要重新引用：

1. 安装插件

npm install html-webpack-plugin --save-dev

2. 修改webpack.config.js

    var HtmlWebpackPlugin = require('html-webpack-plugin')
 
    module.exports = {
        plugins: [
            new HtmlWebpackPlugin({
                filename: '../index.html',
                template: path.resolve(__dirname, '../app/index/index.html'),
                inject: true
            })
        ]
    }

Vue 生产环境部署
使用 Webpack 的 DefinePlugin 来指定生产环境，以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。例如配置：

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}