separate file for webpack.dev and webpack.prod

amrlabib · amrlabib · commit 8c863e2fc863 · 2019-05-14T15:27:24.000+04:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+dev-dist
 dist
 node_modules
 .DS_Store
diff --git a/.npmignore b/.npmignore
@@ -4,6 +4,7 @@ src
 build
 !.eslintrc
 yarn-error.log
+dev-dist
 
 *.js
 !dist/index.js
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
 	</title>
 </head>
 <body>
+	<h1>test</h1>
 	<div id="app">
 
 	</div>
diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
   "description": "React timer hook is a custom react hook built to handle timers, stopwatch and timer logic and state in your react component.",
   "main": "dist/index.js",
   "scripts": {
-    "build:dev": "webpack && webpack-dev-server",
-    "build:prod": "rm -rf ./dist && webpack"
+    "build:dev": "webpack --config webpack.dev.js && webpack-dev-server --open --config webpack.dev.js",
+    "build:prod": "rm -rf ./dist && webpack --config webpack.prod.js"
   },
   "repository": {
     "type": "git",
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -7,12 +7,12 @@ module.exports = {
     performance: {
       hints: false
     },
-    mode: "production",
+    mode: "development",
     entry: './src/index.js',
     output: {
         filename: 'js/scripts.js',
         chunkFilename: '[name].[chunkhash].js',
-        path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, 'dev-dist'),
     },
     module: {
         rules: [{
@@ -27,12 +27,11 @@ module.exports = {
     plugins: [
         new CopyWebpackPlugin([
             { from: './index.html', to: './' },
-            { from: './src/useTimer.js', to: './index.js' }
         ]),
     ],
     devServer: {
-      contentBase: path.join(__dirname, 'dist'),
+      contentBase: path.join(__dirname, 'dev-dist'),
       compress: true,
       port: 9000
     }
-}
+}
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -0,0 +1,32 @@
+const path = require('path')
+
+
+module.exports = {
+    performance: {
+      hints: false
+    },
+    mode: "production",
+    entry: './src/useTimer.js',
+    output: {
+        filename: './index.js',
+        // chunkFilename: '[name].[chunkhash].js',
+        // path: path.resolve(__dirname, 'dist'),
+        library: 'react-timer-hook',
+        libraryTarget: "umd"
+    },
+    module: {
+        rules: [{
+            test: /\.js$/,
+            // exclude: /node_modules/,
+            loader: 'babel-loader',
+            options: {
+                presets: ['env', 'es2015', 'react', 'stage-1'],
+            }
+        }]
+    },
+    externals: [
+      'react',
+      // Everything that starts with "library/"
+      /^react\/.+$/,
+    ],
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+dev-dist`
`1`	`2`	`dist`
`2`	`3`	`node_modules`
`3`	`4`	`.DS_Store`