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;

.