lego-web/webpack.config.js

var path = require('path'),
  webpack = require('webpack'),
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  BomPlugin = require('webpack-utf8-bom'),
  fs = require('fs'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  CleanWebpackPlugin = require('clean-webpack-plugin'),
  S3Plugin = require('webpack-s3-plugin'),
  WebpackMd5Hash = require('webpack-md5-hash')

/*
 * 指定项目名
 */

let port = 8080

const buildEntry = function() {
  let entryPathes = [`./src/pages`]
  let ret = {}
  for (let entryPath of entryPathes) {
    let dir = path.join(__dirname, entryPath)
    let entries = fs.readdirSync(dir)
    entries.forEach(entry => {
      if (entry.charAt(0) === '.') return
      ret[path.basename(entry, '.js')] = `${entryPath}/${entry}`
    })
  }
  return ret
}

const buildHTML = function() {
  let dir = path.join(__dirname, `src/pages`)
  let entries = fs.readdirSync(dir)
  return entries
    .filter(entry => {
      return entry.charAt(0) !== '.'
    })
    .map(entry => {
      let basename = path.basename(entry, '.js')
      return new HtmlWebpackPlugin({
        filename: `${basename}.html`,
        template: `./src/templates/index.html`,
        chunks: ['vendor', basename],
        inject: 'true'
      })
    })
}

module.exports = {
  entry: Object.assign(
    {
      vendor: ['vue', 'vue-router', 'vuex', 'babel-polyfill']
    },
    buildEntry()
  ),
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: process.env.NODE_ENV == 'production' ? `//testquickb2c.s3.amazonaws.com/` : '/dist/',
    filename: process.env.NODE_ENV == 'production' ? '[name].[chunkhash:12].js' : '[name].js'
  },
  resolve: {
    extensions: ['.vue', '.js'],
    modules: ['node_modules'],
    alias: {
      vue: 'vue/dist/vue.min.js',
      components: __dirname + '/src/components/',
      assets: __dirname + '/src/assets/',
      stores: __dirname + '/src/stores/',
      utils: __dirname + '/src/utils'
    }
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        exclude: /(node_modules|plugins|assets)/,
        loader: 'eslint-loader',
        options: {
          fix: false
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders:
            process.env.NODE_ENV == 'production' ? { css: ExtractTextPlugin.extract({ use: 'css-loader', fallback: 'vue-style-loader' }) } : null
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['es2015', 'stage-0'],
          plugins: ['transform-runtime']
        }
      },
      {
        test: /\.html$/,
        loader: 'vue-html-loader'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        query: {
          limit: 15000,
          name: 'images/[name].[hash].[ext]'
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: {
      index: `/dist/`
    },
    host: '0.0.0.0',
    port: port,
    disableHostCheck: true
  }
}

module.exports.plugins = [new CleanWebpackPlugin(['dist'])].concat(buildHTML()).concat([
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: process.env.NODE_ENV === 'production' ? 'vendors.[chunkhash:12].js' : 'vendors.js',
    minChunks: function(module, count) {
      return false
    },
    minify: {
      removeComments: true,
      collapseWhitespace: false
    }
  }),
  new WebpackMd5Hash(),
  new webpack.LoaderOptionsPlugin({
    options: {
      vue: {
        autoprefixer: {
          browsers: ['> 5%']
        }
      }
    }
  }),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: `"${process.env.NODE_ENV}"`,
      APP_ID: `"${process.env.APP_ID}"`,
      APP_KEY: `"${process.env.APP_KEY}"`,
      API_BASE: `"${process.env.API_BASE}"`,
      MASTER_KEY: `"${process.env.MASTER_KEY}"`
    }
  }),
  new webpack.HashedModuleIdsPlugin()
])
if (process.env.NODE_ENV === 'production') {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new BomPlugin(true),
    new ExtractTextPlugin('[name].[contenthash:12].css'),
    new S3Plugin({
      include: /.*\.(css|js)$/,
      s3Options: {
        accessKeyId: 'AKIAIJIR4W2DBXGIJ2EA',
        secretAccessKey: '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'
      },
      s3UploadOptions: {
        Bucket: 'testquickb2c'
      }
    })
    // new S3Plugin({
    //   directory: 'src/static',
    //   s3Options: {
    //     accessKeyId: 'AKIAIJIR4W2DBXGIJ2EA',
    //     secretAccessKey: '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'
    //   },
    //   s3UploadOptions: {
    //     Bucket: 'testquickb2c'
    //   }
    // })
  ])
} else {
  module.exports.devtool = 'cheap-source-map'
}