webpack+vue+vue-router+thunk入坑笔记

1. 全局安装

* npm install webpack
* npm install babel
* 全局创建.babelrc 
* copy 内容2（package.json）执行 npm install  局部安装所需控件

2. package.json内容如下，

{
  "name": "longhu",
  "version": "1.0.0",
  "main": "gulpFile.js",
  "dependencies": {
    "acorn": "^5.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "element-ui": "^1.0.0",
    "graceful-fs": "^4.1.11",
    "gulp": "^3.9.1",
    "less": "^2.7.2",
    "source-list-map": "^2.0.0",
    "source-map": "^0.5.6",
    "tapable": "^0.2.6",
    "vue": "^2.1.6",
    "webpack": "^3.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-vue-app": "^1.2.0",
    "bower": "^1.8.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.8.5",
    "imagemin-webpack-plugin": "^1.5.0-beta.0",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1"
  },
  "scripts": {
    "build": "webpack --display-error-details -w&",
    "dev": "webpack-dev-server --inline --hot --open --content-base&"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

3. webpack.config.js配置如下

/**
 * Created by mazhenxiao on 2016/12/19.
 */
var webpack = require("webpack");
var path = require("path");
var jspath = "./content/js/es6/";
var jsdist = "./content/dist/js/";
var css = "../css/";
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); //thunk
var compress = require("webpack/lib/optimize/UglifyJsPlugin"); //压缩
var DedupePlugin = require("webpack/lib/optimize/DedupePlugin"); //多文件
var ImageminPlugin = require('imagemin-webpack-plugin').default;//图片压缩
//const opn = require('opn');
console.log(path.join(__dirname,jspath, "index.js"));
module.exports = {
    entry: {
        "index": path.join(__dirname,jspath, "index.js")
    },
    output: {
        path: path.join(__dirname,jsdist),
        publicPath:'./content/dist/js/',
        chunkFilename: 'chunk-[name].js',
        filename: '[name]-ES6.js'
    },
    module: {
        loaders: [
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader',exclude: /node_modules/ },
            { test: /\.css$/, loader: 'style-loader!css-loader!less-loader',exclude: /node_modules/ },
            { test: /\.vue$/, loader: 'vue-loader',exclude: /node_modules/ },
            {
                test: /\.js$/, //path.join(__dirname, jspath),
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new CommonsChunkPlugin({  
            name: "chunk"
        }),
        /*  new compress({  //压缩放到上线时再打开
            output: {
                comments: false,  // remove all comments
              },
              compress: {
                warnings: false
              }
        }), */
        new DedupePlugin({
            'process.env': {NODE_ENV: '"production"'}
        }),
        new ImageminPlugin({
            disable: process.env.NODE_ENV !== 'production', // Disable during development 
            pngquant: {
              quality: '95-100'
            }
          })
    ] 
}

4. .babelrc 文件配置

{ 
    "presets": [ "es2015"],  //解析es6为es6
   // "plugins": ["syntax-dynamic-import"]  //异步数据加载chunk分割文件，但是异步加载不太好用果断注释
}

5. 路由
   路由部分有一个坑
   ie不支持require.ensure,提示消息爆粗口：“Promise不存在”，
   按官网提示添加新插件syntax-dynamic-import，但是不好使，真正好用的方法如下（血泪史请留意）

* npm install babel-polyfill
* 在路由页面导入 import "babel-polyfill";

/**
 * 页面路由功能获取右侧内容，最后名称为页面生成chunk切割文件名称
 */
/* import home from "../view/Home.vue"; */
import "babel-polyfill";  //兼容ie
Vue.use(VueRouter);
  let Home =callback=>require.ensure([],require=>callback(require('../view/Home.vue').default),"home"); 
 //const Indexs = require("../view/index.vue");
 //let Home = () => import(/* webpackChunkName: "Home" */ '../view/Home.vue')
const routes = [
    {
        name:"index",path:"/",component:Home
    }]

const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
  })
  window["router"] = router;
  export default router;

6. 页面绑定

import router from "./route.js";
let main = new Vue({
   router
}).$mount("#contentView")