react-webpack2-starter/webpack.dev.config.js at master · evgenyantipin/react-webpack2-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
var DashboardPlugin = require('webpack-dashboard/plugin');

process.noDeprecation = true;

const rootPath = path.resolve(__dirname, 'src');

const alias = {
  images: path.resolve(rootPath, 'assets/images'),
  styles: path.resolve(rootPath, 'assets/styles'),
  fonts: path.resolve(rootPath, 'assets/fonts')
};

const host = process.env.HOST || 'localhost'
const port = process.env.PORT || 1717

let babelTransformsPlugins = [
  { transform: "react-transform-catch-errors", imports: ["react", "delicate-error-reporter"] },
  { transform: "react-transform-hmr", imports: ["react"], locals: ["module"] }
]

module.exports = {
  devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    './src/app.js'
  ],

   output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  module: {
    rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'style-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'resolve-url-loader'
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: () => [autoprefixer],
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              }
            },
          ],
        },
        {
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            babelrc: false,
            presets: [['es2015', { modules: false }], 'react', 'stage-0'],
            plugins: ['transform-decorators-legacy', 'react-hot-loader/babel', [ 'react-transform', { transforms: babelTransformsPlugins } ]]
          },
        },
        {
          test: /\.(jpe?g|png|gif)$/i,
          use: {
            loader: 'url-loader',
            options: { limit: 10240 }
          }
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: {
            loader: 'url-loader',
            options: { limit: 10000, mimetype: 'image/svg+xml' }
          }
        }
    ]
  },

  resolve: {
    modules: [
      rootPath,
      'node_modules'
    ],
    alias,
    extensions: ['*', '.js', '.scss']
  },

  plugins: [
    new DashboardPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      __DEVELOPMENT__: true
    }),
    new HtmlWebpackPlugin({
      title: 'Project title',
      inject: true,
      template: './src/index.ejs'
    })
  ]
}