Use webpack html and icon generation

Author: ducksoupdev

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change log
 
+## [v0.9.0] (2017-08-24)
+
+**Features**
+
+* Add [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) for creating HTML files
+* Add webpack loaders for loading sass styles
+* Add [favicon webpack generator](https://github.com/jantimon/favicons-webpack-plugin) for creating favicons and icons!
+
 ## [v0.8.0] (2017-08-24)
 
 **Features**
@@ -101,6 +109,7 @@
 [#3]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/3
 [#2]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/2
 [#1]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/1
+[v0.9.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.8.0...v0.9.0
 [v0.8.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.7.1...v0.8.0
 [v0.7.1]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.7.0...v0.7.1
 [v0.7.0]: https://github.com/ducksoupdev/vue-webpack-typescript/compare/v0.6.0...v0.7.0

README.md

@@ -24,6 +24,6 @@ $ npm run dev
 - `npm run test:watch`: Fast feedback Mocha unit tests with hot-reload
 - `npm run coverage`: Karma coverage reporter
 - `npm run lint`: Lint all Typescript files
-- `npm run build`: build with HTML/CSS/JS minification.
+- `npm run build`: build with HTML/CSS/JS minification and icon generation
 - `npm run ci:teamcity`: Teamcity CI integration
 - `npm run ci:jenkins`: Jenkins CI integration

template/config/helpers.js

@@ -1,7 +1,7 @@
-const path = require("path");
+const path = require('path');
 
 // Helper functions
-const ROOT = path.resolve(__dirname, "..");
+const ROOT = path.resolve(__dirname, '..');
 
 function root(args) {
   args = Array.prototype.slice.call(arguments, 0);

template/config/webpack.config.base.js

@@ -1,33 +1,45 @@
-const helpers = require("./helpers"),
+const helpers = require('./helpers'),
   CopyWebpackPlugin = require('copy-webpack-plugin');
 
 let config = {
   entry: {
-    "main": helpers.root("/src/main.ts")
+    'main': helpers.root('/src/main.ts')
   },
   output: {
-    path: helpers.root("/dist/js"),
-    filename: "[name].js"
+    path: helpers.root('/dist'),
+    filename: 'js/[name].[hash].js'
   },
-  devtool: "source-map",
+  devtool: 'source-map',
   resolve: {
-    extensions: [".ts", ".js", ".html"],
+    extensions: ['.ts', '.js', '.html'],
     alias: {
-      'vue$': 'vue/dist/vue.common.js'
+      'vue$': 'vue/dist/vue.esm.js',
     }
   },
   module: {
-    rules: [
-      {test: /\.ts$/, exclude: /node_modules/, enforce: 'pre', loader: 'tslint-loader'},
-      {test: /\.ts$/, exclude: /node_modules/, loader: "awesome-typescript-loader"},
-      {test: /\.html$/, loader: 'raw-loader', exclude: ['./src/index.html']}
+    rules: [{
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        enforce: 'pre',
+        loader: 'tslint-loader'
+      },
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        loader: 'awesome-typescript-loader'
+      },
+      {
+        test: /\.html$/,
+        loader: 'raw-loader',
+        exclude: ['./src/index.html']
+      }
     ],
   },
   plugins: [
-    new CopyWebpackPlugin([
-      {from: 'src/assets', to: '../assets'},
-      {from: 'src/css', to: '../css'}
-    ]),
+    new CopyWebpackPlugin([{
+      from: 'src/assets',
+      to: './assets'
+    }, ]),
   ]
 };
 

template/config/webpack.config.coverage.js

@@ -1,22 +1,12 @@
-const webpackConfig = require("./webpack.config.base")
-  DefinePlugin = require('webpack/lib/DefinePlugin'),
-  SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin'),
-  env = require('../environment/dev.env');
-
-webpackConfig.module.rules[1].query = {
-  compilerOptions: {
-    inlineSourceMap: true,
-    sourceMap: false
-  }
-};
+const webpackConfig = require('./webpack.config.test');
 
 webpackConfig.module.rules = [...webpackConfig.module.rules,
   {
     test: /\.ts$/,
-    enforce: "post",
-    loader: "istanbul-instrumenter-loader",
+    enforce: 'post',
+    loader: 'istanbul-instrumenter-loader',
     exclude: [
-      "node_modules",
+      'node_modules',
       /\.spec\.ts$/
     ],
     query: {
@@ -25,16 +15,4 @@ webpackConfig.module.rules = [...webpackConfig.module.rules,
   }
 ];
 
-webpackConfig.plugins = [...webpackConfig.plugins,
-  new SourceMapDevToolPlugin({
-    filename: null, // if no value is provided the sourcemap is inlined
-    test: /\.(ts|js)($|\?)/i
-  }),
-  new DefinePlugin({
-    'process.env': env
-  })
-];
-
-webpackConfig.devtool = "inline-source-map";
-
 module.exports = webpackConfig;

template/config/webpack.config.dev.js

@@ -1,21 +1,50 @@
-const helpers = require("./helpers"),
-  webpackConfig = require("./webpack.config.base"),
+const helpers = require('./helpers'),
+  webpackConfig = require('./webpack.config.base'),
+  HtmlWebpackPlugin = require('html-webpack-plugin'),
   DefinePlugin = require('webpack/lib/DefinePlugin'),
   env = require('../environment/dev.env');
 
+webpackConfig.module.rules = [...webpackConfig.module.rules,
+  {
+    test: /\.scss$/,
+    use: [{
+        loader: 'style-loader'
+      },
+      {
+        loader: 'css-loader'
+      },
+      {
+        loader: 'sass-loader'
+      }
+    ]
+  },
+  {
+    test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+    loader: 'file-loader'
+  }
+];
+
+webpackConfig.plugins = [...webpackConfig.plugins,
+  new HtmlWebpackPlugin({
+    inject: true,
+    template: helpers.root('/src/index.html'),
+    favicon: helpers.root('/src/favicon.ico')
+  }),
+  new DefinePlugin({
+    'process.env': env
+  })
+];
+
 webpackConfig.devServer = {
   port: 8080,
-  host: "localhost",
+  host: 'localhost',
   historyApiFallback: true,
-  watchOptions: {aggregateTimeout: 300, poll: 1000},
+  watchOptions: {
+    aggregateTimeout: 300,
+    poll: 1000
+  },
   contentBase: './src',
   open: true
 };
 
-webpackConfig.plugins = [...webpackConfig.plugins,
-  new DefinePlugin({
-    'process.env': env
-  })
-]
-
 module.exports = webpackConfig;

template/config/webpack.config.prod.js

@@ -1,24 +1,108 @@
-const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'),
+const glob = require('glob'),
+  path = require('path'),
+  UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'),
+  HtmlWebpackPlugin = require('html-webpack-plugin'),
   CompressionPlugin = require('compression-webpack-plugin'),
-  webpackConfig = require("./webpack.config.base"),
-  helpers = require("./helpers"),
+  ExtractTextPlugin = require('extract-text-webpack-plugin'),
+  PurifyCSSPlugin = require('purifycss-webpack'),
+  FaviconsWebpackPlugin = require('favicons-webpack-plugin'),
+  autoprefixer = require('autoprefixer'),
+  webpackConfig = require('./webpack.config.base'),
+  helpers = require('./helpers'),
   DefinePlugin = require('webpack/lib/DefinePlugin'),
   env = require('../environment/prod.env');
 
-webpackConfig.entry["main.min"] = helpers.root("/src/main.ts");
+const extractSass = new ExtractTextPlugin({
+  filename: 'css/[name].[contenthash].css',
+  disable: process.env.NODE_ENV === 'development'
+});
+
+const purifyCss = new PurifyCSSPlugin({
+  paths: glob.sync(path.join(__dirname, '../src/**/*.html')),
+  purifyOptions: {
+    info: true,
+    whitelist: []
+  }
+});
+
+webpackConfig.module.rules = [...webpackConfig.module.rules,
+  {
+    test: /\.scss$/,
+    use: extractSass.extract({
+      use: [{
+          loader: 'css-loader',
+          options: {
+            minimize: true,
+            sourceMap: true,
+            importLoaders: 2
+          }
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            plugins: () => [autoprefixer]
+          }
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            outputStyle: 'expanded',
+            sourceMap: true,
+            sourceMapContents: true
+          }
+        }
+      ],
+      // use style-loader in development
+      fallback: 'style-loader'
+    })
+  },
+  {
+    test: /\.(jpg|png|gif)$/,
+    loader: 'file-loader?name=assets/img/[name].[ext]'
+  },
+  {
+    test: /\.(eot|svg|ttf|woff|woff2)$/,
+    loader: 'file-loader?name=fonts/[name].[ext]'
+  }
+];
+
+// ensure ts lint fails the build
+webpackConfig.module.rules[0].options = {
+  failOnHint: true
+};
 
 webpackConfig.plugins = [...webpackConfig.plugins,
+  extractSass,
+  purifyCss,
+  new HtmlWebpackPlugin({
+    inject: true,
+    template: helpers.root('/src/index.html'),
+    favicon: helpers.root('/src/favicon.ico'),
+    minify: {
+      removeComments: true,
+      collapseWhitespace: true,
+      removeRedundantAttributes: true,
+      useShortDoctype: true,
+      removeEmptyAttributes: true,
+      removeStyleLinkTypeAttributes: true,
+      keepClosingSlash: true,
+      minifyJS: true,
+      minifyCSS: true,
+      minifyURLs: true
+    }
+  }),
   new UglifyJsPlugin({
     include: /\.min\.js$/,
     minimize: true
   }),
   new CompressionPlugin({
-    asset: "[path].gz[query]",
+    asset: '[path].gz[query]',
     test: /\.min\.js$/
   }),
   new DefinePlugin({
     'process.env': env
-  })
+  }),
+  new FaviconsWebpackPlugin(helpers.root('/src/icon.png'))
 ];
 
 module.exports = webpackConfig;

template/config/webpack.config.test.js

@@ -1,8 +1,8 @@
 var webpack = require('webpack'),
-    webpackConfig = require('./webpack.config.base'),
-    DefinePlugin = require('webpack/lib/DefinePlugin'),
-    SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin'),
-    env = require('../environment/dev.env');
+  webpackConfig = require('./webpack.config.base'),
+  DefinePlugin = require('webpack/lib/DefinePlugin'),
+  SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin'),
+  env = require('../environment/dev.env');
 
 webpackConfig.module.rules = [{
     test: /\.ts$/,
@@ -19,6 +19,23 @@ webpackConfig.module.rules = [{
     test: /\.html$/,
     loader: 'raw-loader',
     exclude: ['./src/index.html']
+  },
+  {
+    test: /\.scss$/,
+    use: [{
+        loader: 'style-loader'
+      },
+      {
+        loader: 'css-loader'
+      },
+      {
+        loader: 'sass-loader'
+      }
+    ]
+  },
+  {
+    test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+    loader: 'url-loader?limit=8192'
   }
 ];