webpack.cfg.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');


const env = process.env.NODE_ENV || 'development'; // eslint-disable-line
const API_ENDPOINT = process.env.API_ENDPOINT || 'http://dev.quantify.world/api'; // eslint-disable-line
const development = env === 'development';
const production = env === 'production';


const p = (_path) => {
  const pathResult = path.join(`${__dirname}/../`, _path);
  console.log('pathResult', pathResult);
  return pathResult;
};

module.exports = {
  entry: {
    // rhl: 'react-hot-loader/patch',
    "main": p('src/index.js'),
    "styles": p('styles/index.less'),
    "vendor": ['lodash']
  },
  output: {
    path: path.resolve('./html/assets'),
    filename: '[name].js',
    publicPath: '/assets/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [{ loader: 'babel-loader' }]
      },
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
        include: [p('node_modules')],
      },
      // main.less (global)
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ['css-loader', 'autoprefixer-loader', 'less-loader'],
        }),
        include: [p('styles')],
      },
      // css modules
      {
        test: /\.less/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]' },
          { loader: 'less-loader' },
        ],
        include: [p('src')],
      },

      {
        test: /\.(jpg|png|mp3)/,
        use: [{ loader: 'file-loader' }]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)/,
        exclude: /(icons_btn_inline)/,
        use: [{ loader: 'null-loader' }]
      },
      {
        test: /\.(svg)/,
        use: [{ loader: 'babel-loader' }, { loader: 'svg-react-loader' }],
        include: [p('assets/icons_btn_inline')],
      },
    ],

    // loaders: [
    //   {
    //     test: /\.jsx?$/,
    //     loader: 'babel-loader',
    //     exclude: /node_modules/,
    //   },
    //   {
    //     test: /\.css$/,
    //     loaders: ['style-loader', 'css-loader'],
    //     include: [p('node_modules')],
    //   },
    //   {
    //     test: /\.less$/,
    //     loader: 'file-loader',
    //     include: [[p('styles')]],
    //   },
    //   {
    //     test: /\.less/,
    //     loader: 'file-loader',
    //     include: [p('src')],
    //   },
    //   {
    //     test: /\.(jpg|png|mp3)/,
    //     loader: 'file-loader',
    //   },
    //   {
    //     test: /\.(eot|svg|ttf|woff|woff2|otf)/,
    //     exclude: /(icons_btn_inline)/,
    //     loader: 'file-loader',
    //   },
    //   {
    //     test: /\.(svg)/,
    //     loader: 'babel-loader!svg-react-loader',
    //     include: [p('assets/icons_btn_inline')],
    //   },
    // ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'] // Specify the common bundle's name.
    }),
    new ExtractTextPlugin("styles.css"),
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(development),
      __DEBUG__: JSON.stringify(development),
      __LAST_BUILD_TIME__: JSON.stringify(new Date()),
      __API_ENDPOINT__: JSON.stringify(API_ENDPOINT),
      'process.env.NODE_ENV': JSON.stringify(env),
    })
  ],
  devServer: {
    contentBase: 'html',
    inline: true,
    // hot: true,
    historyApiFallback: true,
    port: 9000
  }
};