kaniosrn-j
3/10/2017 - 10:40 PM

webpack starter kit

webpack starter kit

const webpack = require('webpack')
const path = require('path')
const Inproduction = process.env.NODE_ENV === 'production'
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  devtool: 'cheap-source-map',
  entry: {
      app: [
        './src/main.js',
        './src/main.scss'
        ]
  },
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name][hash].js',
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        use: ExtractTextPlugin.extract({
					use: ['css-loader','postcss-loader','sass-loader'],
					fallback: 'style-loader',
					// option:
        })
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
			{
				test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
				loader: 'file-loader',
				options:{
					name: './images/[name].[hash].[ext]'
				}
			},
    ]
  },
	devServer: {
			contentBase: path.join(__dirname, "./dist"),
			compress: true,
			port: 9000,
			stats: 'errors-only',
			open: true
	},
  plugins: [
    new ExtractTextPlugin("./[name][hash].css"),
    new webpack.LoaderOptionsPlugin({
      minimize: Inproduction,
      debug: true,
      options: {
        context: __dirname
      }
    }),
    new HtmlWebpackPlugin({
      title: 'My App Title',
      // filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      hash: true,
      minify: {
        collapseWhitespace: true
      }
    })
  ],
}

if ( Inproduction ){
  module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin
  )
}