// webpack.config.js 文件：
const path = require('path') // 引入path模块

module.exports = {

  "entry": "./src/main.js",  // 入口文件

  "output": {

    "filename": 'bundle.js', // 打包后文件名字

    "path": path.resolve(__dirname, "dist"),  // 出口文件路径

    "publicPath": "/dist" // 虚拟打包后文件路径。热替换时有用。打包文件不写入磁盘，存在虚拟文件夹中，以便于修改文件后及时反馈在网页上。

  },

  "module": {

    "loaders":[{

      "test": /\.css$/, // css文件需要style-loader，css-loader

      "loader": ["style-loader","css-loader"],

      "exclude": '/node_modules' // 不需要编译node_modules

    },{

      "test": /\.js$/,

      "loader": 'babel-loader', // js文件使用babel-loader 转换。

      "exclude": '/node_modules'

    },{

      "test": /\.vue$/, // 遇到vue文件使用vue-loader。vue-loader需要依赖其他loader 下载后会有提示

      "loader": 'vue-loader',

      "exclude": '/node_modules'

    }]

  },

  resolve: {

    alias: { // 别名设置

      'vue$': 'vue/dist/vue.esm.js', // 运行时构建必用。

        '@': path.resolve('src') // @代表src目录

    }

  },

  devServer: { // 服务器设置

    // contentBase: '', 这个键 主要作用是静态服务器入口文件夹。如果不设置，相当于项目目录。如果有index.html 会直接找到index.html并且打开。

    hot: true, // 热切换

    historyApiFallback: true,  // 单页应用找不到时回滚到index.html

    inline: true

  }

}

  // 多文件入口

　"entry": {

    "first":"./src/entry/first.js", // key为文件名，对应出口[name].js 中的name

    "second": './src/entry/secend.js' // value 为入口文件路径。

  },

  plugins: [

     new HtmlWebpackPlugin ({ // 这个插件能在打包的时候，自动生成html文件，并且放入出口path中。并且sript src 引入所有打包的js文件。

      filename: 'second.html', // 生产的html文件名字。

      // template: 'test.html',

      inject: true

    }),

    new HtmlWebpackPlugin({ // 2次实例化，生成2个html文件

      filename: 'first.html',

      inject: true

    })

  ],

  "output": {

    "filename": '[name].js', // 出口文件名字，对于入口的key值

    "path": path.resolve(__dirname, "./dist"),

    "publicPath": "/dist"

  },

// package.json  
// 这儿有了webpack，不再需要main字段。设置scripts字段。这儿用npm run dev 可运行dev键 后面的代码。

 "scripts": {

    "dev": "webpack-dev-server --inline --hot", // 启动webpack调试服务器，只重新渲染修改部分，修改后立即刷新。

    "build": "webpack -p" // webpack打包，并且文件压缩文件。

  },

// .babelrc 
{

   presets：['stage-2']  // 这儿stage 一共5个阶段，stage-5 不存在，为es2015 ，stage-0 最高，阶段数字越小，技术越新，但是新技术不稳定，可能未来会被淘汰。一般选stage-2

}