vue 項目中 自定義 webpack 的 配置文件（webpack.config.babel.js）

webpack.config.babel.js，這樣命名是想讓webpack在編譯的時候自動識別es6的語法，現在貌似不需要這樣命名了，之前用webpack1.x的時候貌似是需要的

let path = require('path');
let webpack = require('webpack');
/*
 html-webpack-plugin插件，webpack中生成HTML的插件，
 具體可以去這里查看https://www.npmjs.com/package/html-webpack-plugin
 */
let HtmlWebpackPlugin = require('html-webpack-plugin');
/*
 webpack插件，提取公共模塊
 */
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let config = {
  //入口文件配置
  entry: {
    index: path.resolve(__dirname, 'src/js/page/index.js'),
    vendors: ['vue', 'vue-router','vue-resource','vuex','element-ui','element-ui/lib/theme-default/index.css'] // 需要進行單獨打包的文件
  },
  //出口文件配置
  output: {
    path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它
    publicPath: '/dist/',                //模板、樣式、腳本、圖片等資源對應的server上的路徑
    filename: 'js/[name].js',            //每個頁面對應的主js的生成配置
    chunkFilename: 'js/[name].asyncChunk.js?'+new Date().getTime() //chunk生成的配置
  },
  module: {
    //加載器
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
          }
        }
      },
      {
        test: /\.html$/,
        loader: "raw-loader"
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["es2015","stage-0"],
          plugins: ['syntax-dynamic-import']
        }
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        //圖片加載器，雷同file-loader，更適合圖片，可以將較小的圖片轉成base64，減少http請求
        //如下配置，將小於8192byte的圖片轉成base64碼
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader?limit=8192&name=images/[hash].[ext]'
      }
    ]
  },
  //插件
  plugins: [
    //webpack3.0的范圍提升
    new webpack.optimize.ModuleConcatenationPlugin(),
    //打包生成html文件，並且將js文件引入進來
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, 'dist/html/index.html'), //生成的html存放路徑，相對於path
      template: path.resolve(__dirname, 'src/html/index.html'), //ejs模板路徑,前面最好加上loader用於處理
      inject: 'body',  //js插入的位置，true/'head'/'body'/false
      hash: true
    }),
    //提取功能模塊
    new CommonsChunkPlugin({
      name: 'vendors', // 將公共模塊提取，生成名為`vendors`的chunk
      minChunks: 2, //公共模塊被使用的最小次數。配置為2，也就是同一個模塊只有被2個以外的頁面同時引用時才會被提取出來作為common chunks
      // children:true  //如果為true,那么公共組件的所有子依賴都將被選擇進來
    }),
  ],
  //使用webpack-dev-server，啟動熱刷新插件
  devServer: {
    contentBase: path.join(__dirname, "/"),
    host: 'localhost',  //建議寫IP地址，開發時候電腦的ip地址。localhost我不知道是幻覺還是怎樣，有時候熱刷新不靈敏
    port: 9090, //默認9090
    inline: true, //可以監控js變化
    hot: true//熱啟動
  },
  //搜索路徑變量
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    },
    extensions:['.js','.scss','.vue','.json']// 可以不加后綴, 直接使用 import xx from 'xx' 的語法
  }
};

module.exports = config;

.