ducksoupdev · NoahLE · Aug 16, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 .idea
 .vscode
+reports/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Change log
 
+## [v1.4.0] (2018-08-16)
+
+**Features**
+
+* Added instructions for installing the dependencies via yarn
+* Uplifted webpack to v4, TypeScript to v3, Karma to v3
+* Removed UglifyJsPlugin, extract-text-plugin, CommonChunksPlugin (depreciated)
+
 ## [v1.3.1] (2018-02-01)
 
 **Features**
@@ -115,7 +123,6 @@
 
 * Fix missing bootstrap.css
 
-
 ## [v0.4.0] (2017-03-17)
 
 **Features**
@@ -129,39 +136,34 @@
 * Vue router is not a constructor - @paulvanbladel [#6]
 * Typescript lint task not working
 
-
 ## [v0.3.1] (2017-02-20)
 
 **Features**
 
 * Add barrels
 
-
 ## [v0.3.0] (2017-02-20)
 
 **Features**
 
 * Fix resources path for development - @rorisme [#3]
 * Use webpack-dev-server for development - @rorisme [#3]
 
-
 ## [v0.2.0] (2017-02-17)
 
 **Features**
 
-*  Migrate to webpack 2 - @ethanrubio [#2]
-
+* Migrate to webpack 2 - @ethanrubio [#2]
 
 ## [v0.1.1] (2017-01-30)
 
 **Fixes**
 
-*  Add clean-css-cli dependency which was missing - @coding2012 [#1]
-
+* Add clean-css-cli dependency which was missing - @coding2012 [#1]
 
-## v0.1.0 (2017-01-24)
+## [v0.1.0] (2017-01-24)
 
-*  Initial release
+* Initial release
 
 [#29]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/29
 [#22]: https://github.com/ducksoupdev/vue-webpack-typescript/pull/22

diff --git a/README.md b/README.md
@@ -1,30 +1,39 @@
 # webpack-typescript
 
-> A Vue 2.5, Webpack 3.10, Typescript 2.7, Bootstrap 4.0 setup with hot reload, dynamic imports, unit testing, 
-code coverage, sass and bundling/minification.
+> A Vue 2.5, Webpack 3.10, Typescript 2.7, Bootstrap 4.0 setup with hot reload, dynamic imports, unit testing, code coverage, sass and bundling/minification.
 
 > See the [changelog](CHANGELOG.md) for updates.
 
 ### Usage
 
 This is a project template for [vue-cli < 3.x](https://github.com/vuejs/vue-cli).
 
-``` bash
+```bash
+# Using npm
 $ npm install -g vue-cli
 $ vue init ducksoupdev/vue-webpack-typescript my-project
 $ cd my-project
 $ npm install
 $ npm run dev
+
+# Using yarn
+$ yarn global add vue-cli
+$ vue init ducksoupdev/vue-webpack-typescript my-project
+$ cd my-project
+$ yarn
+$ yarn dev
 ```
 
 ### What's Included
 
-- `npm run dev`: Webpack + Typescript with config for source maps & hot-reload
-- `npm test`: Mocha unit tests
-- `npm run test:debug`: Debug Mocha unit tests in Chrome
-- `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, code splitting and icon generation
-- `npm run ci:teamcity`: Teamcity CI integration
-- `npm run ci:jenkins`: Jenkins CI integration
+| npm                   | yarn               | description                                                             |
+| --------------------- | ------------------ | ----------------------------------------------------------------------- |
+| `npm run dev`         | `yarn dev`         | Webpack + Typescript with config for source maps & hot-reload           |
+| `npm test`            | `yarn test`        | Mocha unit tests                                                        |
+| `npm run test:debug`  | `yarn test:debug`  | Debug Mocha unit tests in Chrome                                        |
+| `npm run test:watch`  | `yarn test:watch`  | Fast feedback Mocha unit tests with hot-reload                          |
+| `npm run coverage`    | `yarn coverage`    | Karma coverage reporter                                                 |
+| `npm run lint`        | `yarn lint`        | Lint all Typescript files                                               |
+| `npm run build`       | `yarn build`       | Build with HTML/CSS/JS minification, code splitting and icon generation |
+| `npm run ci:teamcity` | `yarn ci:teamcity` | Teamcity CI integration                                                 |
+| `npm run ci:jenkins`  | `yarn ci:jenkins`  | Jenkins CI integration                                                  |
diff --git a/template/config/karma.unit.js b/template/config/karma.unit.js
@@ -12,7 +12,9 @@ module.exports = function (config) {
       'src/test.ts': ['webpack']
     },
     webpack: webpackConfig,
-    webpackServer: { noInfo: true },
+    webpackServer: {
+      noInfo: true
+    },
     reporters: ['mocha'],
     port: 9876,
     colors: true,

diff --git a/template/config/webpack.config.base.js b/template/config/webpack.config.base.js
@@ -12,6 +12,9 @@ let config = {
     chunkFilename: 'js/[name].[hash].js',
     publicPath: '/'
   },
+  performance: {
+    hints: false
+  },
   devtool: 'source-map',
   resolve: {
     extensions: ['.ts', '.js', '.html'],
@@ -20,30 +23,31 @@ let config = {
     }
   },
   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 NamedModulesPlugin(),
     new CopyWebpackPlugin([{
       from: 'src/assets',
       to: './assets'
-    } ])
+    }])
   ]
 }
 

diff --git a/template/config/webpack.config.dev.js b/template/config/webpack.config.dev.js
@@ -4,18 +4,21 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 const env = require('../environment/dev.env')
 
+webpackConfig.mode = "development"
+
 webpackConfig.module.rules = [...webpackConfig.module.rules,
   {
     test: /\.scss$/,
-    use: [{
-      loader: 'style-loader'
-    },
-    {
-      loader: 'css-loader'
-    },
-    {
-      loader: 'sass-loader'
-    }
+    use: [
+      {
+        loader: 'style-loader'
+      },
+      {
+        loader: 'css-loader'
+      },
+      {
+        loader: 'sass-loader'
+      }
     ]
   },
   {

diff --git a/template/config/webpack.config.prod.js b/template/config/webpack.config.prod.js
@@ -1,50 +1,24 @@
-const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
-const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CompressionPlugin = require('compression-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
-const autoprefixer = require('autoprefixer')
 const webpackConfig = require('./webpack.config.base')
 const helpers = require('./helpers')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const env = require('../environment/prod.env')
 
-const extractSass = new ExtractTextPlugin({
-  filename: 'css/[name].[contenthash].css',
-  disable: process.env.NODE_ENV === 'development'
-})
+webpackConfig.mode = "production"
 
 webpackConfig.module.rules = [...webpackConfig.module.rules,
   {
-    test: /\.scss$/,
-    use: extractSass.extract({
-      use: [{
-        loader: 'css-loader',
-        options: {
-          minimize: false,
-          sourceMap: false,
-          importLoaders: 2
-        }
-      },
-      {
-        loader: 'postcss-loader',
-        options: {
-          plugins: () => [autoprefixer],
-          sourceMap: false
-        }
-      },
-      {
-        loader: 'sass-loader',
-        options: {
-          sourceMap: false
-        }
-      }
-      ],
-      // use style-loader in development
-      fallback: 'style-loader'
-    })
+    test: /\.(sa|sc|c)ss$/,
+    use: [
+      process.env.NODE_ENV !== 'production' ? 'style-loader' : 'MiniCssExtractPlugin.loader',
+      'css-loader',
+      'sass-loader'
+    ]
   },
   {
     test: /\.(jpg|png|gif)$/,
@@ -73,23 +47,33 @@ webpackConfig.module.rules[0].options = {
   failOnHint: true
 }
 
-webpackConfig.plugins = [...webpackConfig.plugins,
-  new CommonsChunkPlugin({
-    name: 'vendor',
-    minChunks: function (module) {
-      return module.context && module.context.indexOf('node_modules') !== -1
+webpackConfig.optimization = {
+  splitChunks: {
+    cacheGroups: {
+      commons: {
+        test: /[\\/]node_modules[\\/]/,
+        name: 'vendors',
+        chunks: 'all'
+      }
     }
+  },
+  minimizer: [
+    new UglifyJsPlugin()
+  ]
+}
+
+webpackConfig.plugins = [...webpackConfig.plugins,
+  new MiniCssExtractPlugin({
+    filename: "[name].css",
+    chunkFilename: "[id].css"
   }),
-  new CommonsChunkPlugin({
-    name: 'manifest',
-    minChunks: Infinity
-  }),
-  extractSass,
   new OptimizeCssAssetsPlugin({
     cssProcessor: require('cssnano'),
     cssProcessorOptions: {
       discardUnused: false,
-      discardComments: { removeAll: true }
+      discardComments: {
+        removeAll: true
+      }
     },
     canPrint: true
   }),
@@ -110,10 +94,6 @@ webpackConfig.plugins = [...webpackConfig.plugins,
       minifyURLs: true
     }
   }),
-  new UglifyJsPlugin({
-    include: /\.js$/,
-    minimize: true
-  }),
   new CompressionPlugin({
     asset: '[path].gz[query]',
     test: /\.js$/

diff --git a/template/config/webpack.config.test.js b/template/config/webpack.config.test.js
@@ -22,15 +22,16 @@ webpackConfig.module.rules = [
   },
   {
     test: /\.scss$/,
-    use: [{
-      loader: 'style-loader'
-    },
-    {
-      loader: 'css-loader'
-    },
-    {
-      loader: 'sass-loader'
-    }
+    use: [
+      {
+        loader: 'style-loader'
+      },
+      {
+        loader: 'css-loader'
+      },
+      {
+        loader: 'sass-loader'
+      }
     ]
   },
   {