update webpack

robertoachar · robertoachar · commit 82b45df7d7d0 · 2018-06-25T18:48:20.000-03:00
diff --git a/.gitignore b/.gitignore
@@ -36,7 +36,7 @@ build/Release
 node_modules/
 jspm_packages/
 
-# Typescript v1 declaration files
+# TypeScript v1 declaration files
 typings/
 
 # Optional npm cache directory
@@ -57,5 +57,20 @@ typings/
 # dotenv environment variables file
 .env
 
-# build
-build/public
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# webpack build output
+dist
diff --git a/package.json b/package.json
@@ -12,9 +12,9 @@
     "src"
   ],
   "scripts": {
-    "dev": "webpack-dev-server --env.env=dev",
     "build": "webpack --env.env=prod",
-    "lint": "eslint statik/**/*.js"
+    "lint": "eslint statik/**/*.js",
+    "start": "webpack-dev-server --env.env=dev"
   },
   "repository": {
     "type": "git",
@@ -35,10 +35,14 @@
     "eslint-config-prettier": "2.9.0",
     "eslint-plugin-prettier": "2.6.1",
     "file-loader": "1.1.11",
-    "imagemin-webpack-plugin": "2.1.5",
+    "html-loader": "0.5.5",
+    "html-webpack-plugin": "3.2.0",
+    "image-webpack-loader": "4.3.1",
     "mini-css-extract-plugin": "0.4.0",
+    "optimize-css-assets-webpack-plugin": "4.0.2",
     "postcss-loader": "2.1.5",
     "prettier": "1.13.6",
+    "style-loader": "0.21.0",
     "uglifyjs-webpack-plugin": "1.2.7",
     "webpack": "4.12.1",
     "webpack-cli": "3.0.8",
diff --git a/statik/index.html b/statik/index.html
@@ -8,19 +8,16 @@
 
   <title>Statik Starter Kit</title>
 
-  <link rel="shortcut icon" type="image/x-icon" href="public/images/favicon.ico" />
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54="
     crossorigin="anonymous" />
-  <link rel="stylesheet" href="public/vendor.bundle.css">
-  <link rel="stylesheet" href="public/app.bundle.css">
 </head>
 
 <body>
   <header class="header">
     <nav class="navbar">
       <a class="navbar__brand" href="/">
-        <img src="public/images/logo.png" alt="Statik Logo">
+        <img src="images/logo.png" alt="Statik Logo">
         <span>Statik</span>
       </a>
       <ul class="navbar__social">
@@ -83,9 +80,6 @@ <h2>Features</h2>
       </p>
     </section>
   </main>
-
-  <script src="public/vendor.bundle.js"></script>
-  <script src="public/app.bundle.js"></script>
 </body>
 
 </html>
diff --git a/statik/scripts/app.js b/statik/scripts/app.js
@@ -3,4 +3,4 @@ import '../styles/app.css';
 import '../images/logo.png';
 import '../images/favicon.ico';
 
-console.log('JavaScript is running...');
+console.log('App is running...');
diff --git a/statik/scripts/vendor.js b/statik/scripts/vendor.js
@@ -1 +1,3 @@
 import '../styles/vendor.css';
+
+console.log('Vendor is running...');
diff --git a/webpack.common.js b/webpack.common.js
@@ -1,14 +1,15 @@
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 
 module.exports = {
   entry: {
-    vendor: path.resolve('statik', 'scripts', 'vendor.js'),
-    app: path.resolve('statik', 'scripts', 'app.js')
+    app: './statik/scripts/app.js',
+    vendor: './statik/scripts/vendor.js'
   },
   output: {
     filename: '[name].bundle.js',
-    path: path.resolve('build', 'public')
+    path: path.resolve('dist')
   },
   module: {
     rules: [
@@ -34,26 +35,13 @@ module.exports = {
             }
           }
         ]
-      },
-      {
-        test: /\.(gif|jpg|png|svg|ico)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              useRelativePath: true
-            }
-          }
-        ]
       }
     ]
   },
-  optimization: {
-    splitChunks: {
-      chunks: 'all',
-      name: true
-    }
-  },
-  plugins: [new CleanWebpackPlugin([path.resolve('build', 'public')])]
+  plugins: [
+    new CleanWebpackPlugin(['dist']),
+    new HtmlWebpackPlugin({
+      template: './statik/index.html'
+    })
+  ]
 };
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,5 @@
 module.exports = (env) => {
-  const config = require(`./webpack/webpack.${env.env}`);
+  const config = require(`./webpack.${env.env}`);
 
   return config;
 };
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -0,0 +1,31 @@
+const merge = require('webpack-merge');
+const path = require('path');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'eval',
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: 'html-loader'
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(gif|jpg|png|svg|ico)$/,
+        include: path.resolve(__dirname, 'statik/images'),
+        use: ['file-loader']
+      }
+    ]
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname, 'dist'),
+    open: true,
+    port: 8080
+  }
+});
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -0,0 +1,80 @@
+const autoprefixer = require('autoprefixer');
+const merge = require('webpack-merge');
+const path = require('path');
+const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: {
+          loader: 'html-loader',
+          options: {
+            minimize: true
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [autoprefixer()]
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(gif|jpg|png|svg|ico)$/,
+        include: path.resolve(__dirname, 'statik/images'),
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              useRelativePath: true
+            }
+          },
+          'image-webpack-loader'
+        ]
+      }
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      name: true
+    },
+    minimizer: [
+      new OptimizeCSSAssetsPlugin({
+        cssProcessorOptions: { discardUnused: false }
+      })
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].bundle.css',
+      chunkFilename: '[id].css'
+    }),
+    new UglifyJsWebpackPlugin({
+      sourceMap: true
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
+});
diff --git a/webpack/webpack.dev.js b/webpack/webpack.dev.js
diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
`1`	`1`	`import '../styles/vendor.css';`
	`2`	`+`
	`3`	`+console.log('Vendor is running...');`