Merge pull request #324 from saguijs/migration-to-webpack-2

Migration to webpack 2
saguijs · Apr 7, 2017 · 568c9dd · 568c9dd
2 parents 71a4f0c + 8205ea3
commit 568c9dd
Show file tree

Hide file tree

Showing 24 changed files with 202 additions and 188 deletions.
diff --git a/README.md b/README.md
@@ -335,7 +335,6 @@ Possible values:
 - `font`
 - `image`
 - `javaScript`
-- `json`
 - `style`
 - `txt`
 - `video`

diff --git a/package.json b/package.json
@@ -38,70 +38,71 @@
   },
   "homepage": "https://github.com/saguijs/sagui#readme",
   "devDependencies": {
-    "babel-cli": "^6.6.5",
-    "babel-register": "^6.7.2",
-    "chai": "^3.3.0",
+    "babel-cli": "^6.24.0",
+    "babel-register": "^6.24.0",
+    "chai": "^3.5.0",
     "in-publish": "^2.0.0",
-    "mocha": "^2.3.3",
+    "mocha": "^3.2.0",
     "temp": "^0.8.3",
-    "tmp": "0.0.28"
+    "tmp": "0.0.31"
   },
   "dependencies": {
-    "autoprefixer": "^6.3.6",
-    "babel-core": "^6.10.4",
-    "babel-eslint": "^7.0.0",
-    "babel-loader": "^6.2.1",
-    "babel-plugin-istanbul": "^2.0.0",
+    "autoprefixer": "^6.7.7",
+    "babel-core": "^6.24.0",
+    "babel-eslint": "^7.2.1",
+    "babel-loader": "^6.4.1",
+    "babel-plugin-istanbul": "^4.1.1",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.7.0",
-    "babel-plugin-transform-runtime": "^6.4.3",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-sagui": "6.6.1",
-    "chalk": "^1.1.1",
-    "clean-webpack-plugin": "^0.1.9",
-    "commander": "^2.8.1",
-    "css-loader": "^0.23.1",
-    "eslint": "~3.7.0",
+    "chalk": "^1.1.3",
+    "clean-webpack-plugin": "^0.1.16",
+    "commander": "^2.9.0",
+    "css-loader": "^0.28.0",
+    "eslint": "~3.19.0",
     "eslint-config-sagui": "^6.0.0",
-    "eslint-config-standard": "6.2.0",
-    "eslint-config-standard-jsx": "3.2.0",
-    "eslint-loader": "^1.0.0",
-    "eslint-plugin-promise": "^2.0.1",
-    "eslint-plugin-react": "^6.3.0",
-    "eslint-plugin-standard": "^2.0.1",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
-    "flow-bin": "0.32.0",
-    "fs-extra": "^0.30.0",
-    "html-webpack-plugin": "^2.7.2",
-    "jasmine-core": "^2.5.1",
-    "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
+    "eslint-config-standard": "^10.2.0",
+    "eslint-config-standard-jsx": "4.0.1",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-node": "^4.2.2",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-react": "^6.10.3",
+    "eslint-plugin-standard": "^3.0.1",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "flow-bin": "0.43.1",
+    "fs-extra": "^2.1.2",
+    "html-webpack-plugin": "^2.28.0",
+    "jasmine-core": "^2.5.2",
+    "karma": "^1.6.0",
     "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.0.0",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-jasmine": "^1.0.2",
-    "karma-mocha-reporter": "^2.0.0",
-    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-coverage": "^1.1.1",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.3",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
-    "lodash.uniq": "^4.3.0",
-    "node-sass": "^3.3.3",
+    "karma-webpack": "^2.0.3",
+    "lodash.uniq": "^4.5.0",
+    "node-sass": "^4.5.2",
     "null-loader": "^0.1.1",
     "parent-module": "^0.1.0",
-    "phantomjs-prebuilt": "^2.1.4",
-    "postcss-loader": "^0.9.1",
-    "postcss-modules-values": "^1.1.1",
+    "phantomjs-prebuilt": "^2.1.14",
+    "postcss-loader": "^1.3.3",
+    "postcss-modules-values": "^1.2.2",
     "raw-loader": "^0.5.1",
     "react-transform-hmr": "^1.0.4",
-    "resolve-url-loader": "^1.4.4",
-    "sass-loader": "^3.2.2",
-    "style-loader": "^0.13.1",
+    "resolve-url-loader": "^2.0.2",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
     "template-directory": "^2.0.0",
-    "url-loader": "^0.5.6",
-    "webpack": "^1.9.6",
-    "webpack-dev-server": "^1.14.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.3.3",
+    "webpack-dev-server": "^2.4.2",
     "webpack-md5-hash": "0.0.5",
-    "webpack-merge": "^0.7.3",
-    "yaml-loader": "^0.2.0"
+    "webpack-merge": "^4.1.0",
+    "yaml-loader": "^0.4.0"
   }
 }
diff --git a/src/cli/index.js b/src/cli/index.js
@@ -29,7 +29,7 @@ const handleError = (e) => {
 }
 
 const setupAction = (NODE_ENV, actionsToRun, options = {}) => (cliOptions = {}) => {
-  if (!process.env.NODE_ENV || process.env.NODE_ENV && process.env.NODE_ENV.trim().length === 0) {
+  if (!process.env.NODE_ENV || (process.env.NODE_ENV && process.env.NODE_ENV.trim().length === 0)) {
     process.env.NODE_ENV = NODE_ENV
     log(`Setting NODE_ENV=${NODE_ENV}`)
   } else {

diff --git a/src/configure-webpack/index.js b/src/configure-webpack/index.js
@@ -56,10 +56,11 @@ const buildSharedWebpackConfig = (saguiConfig) => {
         new webpack.optimize.DedupePlugin(),
         new webpack.optimize.UglifyJsPlugin({
           compress: {
-            // disable warning messages
-            // since they are very verbose
-            // and provide little value
-            warnings: false
+            sourceMap: true,
+
+            // signal loaders to minimize
+            // https://webpack.js.org/guides/migrating/#uglifyjsplugin-minimize-loaders
+            minimize: true
           }
         })
       ] : []),
@@ -71,10 +72,6 @@ const buildSharedWebpackConfig = (saguiConfig) => {
       // To ensure hashes are generated based on the file contents, use webpack-md5-hash plugin.
       ...(action === actions.BUILD ? [new WebpackMd5Hash()] : []),
 
-      // Use "OccurrenceOrderPlugin" in order to make build deterministic.
-      // See https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95
-      ...(action === actions.BUILD ? [new webpack.optimize.OccurrenceOrderPlugin(true)] : []),
-
       // We should not clean on any other action
       ...(action === actions.BUILD ? [new CleanWebpackPlugin(['dist'], {
         root: projectPath,
@@ -87,9 +84,8 @@ const buildSharedWebpackConfig = (saguiConfig) => {
     ],
 
     resolve: {
-      extensions: ['', ...fileExtensions.list.JAVASCRIPT],
-
-      root: [
+      extensions: fileExtensions.list.JAVASCRIPT,
+      modules: [
         path.join(projectPath, '/node_modules'),
         projectSourcePath,
 
@@ -103,7 +99,7 @@ const buildSharedWebpackConfig = (saguiConfig) => {
       // Should first try to resolve loaders nested within Sagui.
       // This fixes an issue in NPM v2 where webpack incorrectly
       // thinks that the package `eslint` is the `eslint-loader`
-      modulesDirectories: [
+      modules: [
         path.join(saguiPath, '/node_modules'),
         path.join(projectPath, '/node_modules')
       ]

diff --git a/src/configure-webpack/index.spec.js b/src/configure-webpack/index.spec.js
@@ -65,7 +65,7 @@ describe('webpack', function () {
       expect(loaders.length).equal(1)
 
       // should remove the exclude attribute as requested
-      expect(loaders[0].exclude).undefined
+      expect(loaders[0].exclude).to.eql(undefined)
     })
   })
 })
diff --git a/src/configure-webpack/loaders/font.js b/src/configure-webpack/loaders/font.js
@@ -5,26 +5,64 @@ export default {
   configure () {
     return {
       module: {
-        loaders: [
+        rules: [
           {
             test: fileExtensions.test.WOFF,
-            loader: 'file-loader?name=[name]-[hash].[ext]&mimetype=application/font-woff'
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: '[name]-[hash].[ext]',
+                  mimetype: 'application/font-woff'
+                }
+              }
+            ]
           },
           {
             test: fileExtensions.test.WOFF2,
-            loader: 'file-loader?name=[name]-[hash].[ext]&mimetype=application/font-woff'
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: '[name]-[hash].[ext]',
+                  mimetype: 'application/font-woff'
+                }
+              }
+            ]
           },
           {
-            test: fileExtensions.test.TTF,
-            loader: 'file-loader?name=[name]-[hash].[ext]&mimetype=application/octet-stream'
+            test: fileExtensions.test.EOT,
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: '[name]-[hash].[ext]'
+                }
+              }
+            ]
           },
           {
-            test: fileExtensions.test.EOT,
-            loader: 'file-loader?name=[name]-[hash].[ext]'
+            test: fileExtensions.test.TTF,
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: '[name]-[hash].[ext]',
+                  mimetype: 'application/octet-stream'
+                }
+              }
+            ]
           },
           {
             test: fileExtensions.test.OTF,
-            loader: 'file-loader?name=[name]-[hash].[ext]'
+            use: [
+              {
+                loader: 'file-loader',
+                options: {
+                  name: '[name]-[hash].[ext]'
+                }
+              }
+            ]
           }
         ]
       }

diff --git a/src/configure-webpack/loaders/image.js b/src/configure-webpack/loaders/image.js
@@ -5,10 +5,18 @@ export default {
   configure ({ action }) {
     return {
       module: {
-        loaders: [
+        rules: [
           {
             test: fileExtensions.test.IMAGE,
-            loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]'
+            use: [
+              {
+                loader: 'url-loader',
+                options: {
+                  limit: 8192,
+                  name: '[name]-[hash].[ext]'
+                }
+              }
+            ]
           }
         ]
       }

diff --git a/src/configure-webpack/loaders/image.spec.js b/src/configure-webpack/loaders/image.spec.js
@@ -5,8 +5,14 @@ import loader from './image'
 describe('image', function () {
   it('should be a url loader', function () {
     const webpackConfig = loader.configure({})
-    const webpackLoader = webpackConfig.module.loaders[0]
+    const webpackLoader = webpackConfig.module.rules[0]
     expect(webpackLoader.test).eql(fileExtensions.test.IMAGE)
-    expect(webpackLoader.loader).eql('url-loader?limit=8192&name=[name]-[hash].[ext]')
+    expect(webpackLoader.use[0]).eql({
+      loader: 'url-loader',
+      options: {
+        limit: 8192,
+        name: '[name]-[hash].[ext]'
+      }
+    })
   })
 })
diff --git a/src/configure-webpack/loaders/index.js b/src/configure-webpack/loaders/index.js
@@ -3,7 +3,6 @@ import merge from 'webpack-merge'
 import font from './font'
 import image from './image'
 import javaScript from './javascript'
-import json from './json'
 import style from './style'
 import txt from './txt'
 import video from './video'
@@ -13,7 +12,6 @@ const loaders = [
   font,
   image,
   javaScript,
-  json,
   style,
   txt,
   video,

diff --git a/src/configure-webpack/loaders/javascript.js b/src/configure-webpack/loaders/javascript.js
@@ -13,40 +13,29 @@ export default {
     ))
 
     return {
-      babel: {
-        babelrc: path.join(projectPath, '.babelrc'),
-        plugins: babelPlugins(action, coverage)
-      },
-
-      eslint: {
-        configFile: path.join(projectPath, '.eslintrc')
-      },
-
       plugins: action === actions.DEVELOP ? [new HotModuleReplacementPlugin()] : [],
 
-      resolve: {
-        extensions: fileExtensions.list.JAVASCRIPT
-      },
-
       module: {
-        preLoaders: [
+        rules: [
           {
             test: fileExtensions.test.JAVASCRIPT,
+            enforce: 'pre',
             loader: 'eslint-loader',
-            exclude: /node_modules/
-          }
-        ],
-        loaders: [
+            exclude: /node_modules/,
+            options: {
+              configFile: path.join(projectPath, '.eslintrc')
+            }
+          },
           {
             test: fileExtensions.test.JAVASCRIPT,
             include: [
               path.join(projectPath, 'src'),
               ...userPaths
             ],
             loader: 'babel-loader',
-            query: {
-              // enabling it breaks source maps
-              compact: false
+            options: {
+              babelrc: path.join(projectPath, '.babelrc'),
+              plugins: babelPlugins(action, coverage)
             }
           }
         ]
-Original file line number
+Diff line change
@@ Expand Up / @@ -335,7 +335,6 @@ Possible values: @@
     - `font`
     - `image`
     - `javaScript`
-    - `json`
     - `style`
     - `txt`
     - `video`
@@ Expand Down @@