simplify webpack config

electron-react-boilerplate · Oct 11, 2015 · f79b70b · vramana · Nov 16, 2015 · chentsulin
1 parent b2ddeb2
commit f79b70b
Show file tree

Hide file tree

Showing 18 changed files with 183 additions and 224 deletions.
diff --git a/app/app.html b/app/app.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8">
     <title>Hello Electron React!</title>
-    <link rel="stylesheet" href="../dist/main.css" />
+    <link rel="stylesheet" href="../dist/global-style.css" />
+    <link rel="stylesheet" href="../dist/style.css" />
   </head>
   <body>
     <div id="react-root"></div>

diff --git a/app/hot-dev-app.html b/app/hot-dev-app.html
@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="react-root"></div>
-    <script src="http://localhost:2992/dist/bundle.js"></script>
+    <script src="http://localhost:3000/dist/bundle.js"></script>
   </body>
 </html>
diff --git a/dist/.gitignore b/dist/.gitignore
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/bundle.js.map b/dist/bundle.js.map
diff --git a/dist/global-style.css b/dist/global-style.css
diff --git a/dist/global-style.css.map b/dist/global-style.css.map
diff --git a/package.js b/package.js
@@ -1,7 +1,7 @@
 /* eslint no-shadow: 0, func-names: 0, no-unused-vars: 0, no-console: 0 */
 var os = require('os');
 var webpack = require('webpack');
-var cfg = require('./webpack/webpack.config.production.js');
+var cfg = require('./webpack.config.production.js');
 var packager = require('electron-packager');
 var assign = require('object-assign');
 var del = require('del');

diff --git a/package.json b/package.json
@@ -6,11 +6,9 @@
   "scripts": {
     "test": "mocha",
     "lint": "eslint .",
-    "dev-server": "webpack-dev-server --config webpack/webpack-dev-server.config.js --progress --colors --port 2992 --inline",
-    "hot-dev-server": "webpack-dev-server --config webpack/webpack-hot-dev-server.config.js --hot --progress --colors --port 2992 --inline",
-    "build": "webpack --config webpack/webpack.config.production.js --progress --profile --colors",
+    "hot-server": "node server.js",
+    "build": "webpack --config webpack.config.production.js --progress --profile --colors",
     "start": "electron .",
-    "start-dev": "NODE_ENV=development electron .",
     "start-hot": "HOT=1 NODE_ENV=development electron .",
     "package": "node package.js",
     "package-all": "node package.js --all"
@@ -56,11 +54,6 @@
     "eslint-config-airbnb": "0.0.8",
     "eslint-plugin-react": "^3.3.1",
     "extract-text-webpack-plugin": "^0.8.2",
-    "file-loader": "^0.8.4",
-    "html-loader": "^0.3.0",
-    "json-loader": "^0.5.2",
-    "loaders-by-extension": "^1.0.0",
-    "markdown-loader": "^0.1.7",
     "minimist": "^1.2.0",
     "mocha": "^2.3.0",
     "node-libs-browser": ">= 0.4.0 <=0.6.0",
@@ -71,7 +64,6 @@
     "sinon": "^1.16.1",
     "stats-webpack-plugin": "^0.2.1",
     "style-loader": "^0.12.3",
-    "url-loader": "^0.5.6",
     "webpack": "^1.12.1",
     "webpack-dev-server": "^1.10.1",
     "webpack-target-electron-renderer": "^0.1.0"

diff --git a/server.js b/server.js
@@ -0,0 +1,18 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config.development');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true,
+  stats: {
+    colors: true
+  }
+}).listen(3000, 'localhost', function(err) {
+  if (err) {
+    console.log(err);
+  }
+
+  console.log('Listening at localhost:3000');
+});
diff --git a/webpack.config.base.js b/webpack.config.base.js
@@ -0,0 +1,20 @@
+module.exports = {
+  module: {
+    loaders: []
+  },
+  output: {
+    path: './dist/',
+    filename: 'bundle.js',
+    libraryTarget: 'commonjs2'
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx'],
+    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
+  },
+  plugins: [
+
+  ],
+  externals: [
+    // put your node 3rd party libraries which can't be built with webpack here (mysql, mongodb, and so on..)
+  ]
+};
diff --git a/webpack.config.development.js b/webpack.config.development.js
@@ -0,0 +1,52 @@
+/* eslint strict: 0 */
+'use strict';
+
+var webpack = require('webpack');
+var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
+var baseConfig = require('./webpack.config.base');
+
+
+var config = Object.create(baseConfig);
+
+config.debug = true;
+
+config.devtool = 'cheap-module-eval-source-map';
+
+config.entry = [
+  'webpack-dev-server/client?http://localhost:3000',
+  'webpack/hot/only-dev-server',
+  './app/mainApp'
+];
+
+config.output.publicPath = 'http://localhost:3000/dist/';
+
+config.module.loaders.push({
+  test: /\.jsx?$/,
+  loaders: ['react-hot-loader', 'babel-loader'],
+  exclude: /node_modules/
+}, {
+  test: /^((?!\.module).)*\.css$/,
+  loaders: [
+    'style-loader',
+    'css-loader'
+  ]
+}, {
+  test: /\.module\.css$/,
+  loaders: [
+    'style-loader',
+    'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!'
+  ]
+});
+
+
+config.plugins.push(
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.DefinePlugin({
+    '__DEV__': true,
+    'process.env': JSON.stringify('development')
+  })
+);
+
+config.target = webpackTargetElectronRenderer(config);
+
+module.exports = config;
diff --git a/webpack.config.production.js b/webpack.config.production.js
@@ -0,0 +1,57 @@
+/* eslint strict: 0 */
+'use strict';
+
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
+var baseConfig = require('./webpack.config.base');
+
+
+var config = Object.create(baseConfig);
+
+config.devtool = 'source-map';
+
+config.entry = './app/mainApp';
+
+config.output.publicPath = '/dist/';
+
+var stylesTextPlugin = new ExtractTextPlugin('style.css', { allChunks: true });
+var globalStylesTextPlugin = new ExtractTextPlugin('global-style.css', { allChunks: true });
+
+config.module.loaders.push({
+  test: /\.jsx?$/,
+  loaders: ['babel-loader'],
+  exclude: /node_modules/
+}, {
+  test: /^((?!\.module).)*\.css$/,
+  loader: globalStylesTextPlugin.extract(
+    'style-loader',
+    'css-loader'
+  )
+}, {
+  test: /\.module\.css$/,
+  loader: stylesTextPlugin.extract(
+    'style-loader',
+    'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
+  )
+});
+
+config.plugins.push(
+  new webpack.optimize.OccurenceOrderPlugin(),
+  new webpack.DefinePlugin({
+    '__DEV__': false,
+    'process.env': JSON.stringify('production')
+  }),
+  new webpack.optimize.UglifyJsPlugin({
+    compressor: {
+      screw_ie8: true,
+      warnings: false
+    }
+  }),
+  stylesTextPlugin,
+  globalStylesTextPlugin
+);
+
+config.target = webpackTargetElectronRenderer(config);
+
+module.exports = config;