chore(*): minimal changes for migration to webpack v2

* Upgrade extract-text-webpack-plugin to v2 * No more need for json-loader * No more DedupePlugin * NoErrorsPlugin -> NoEmitOnErrorsPlugin * config.debug deprecated, use webpack.LoaderOptionsPlugin * preLoaders deprecated, add loaders with attribute "pre"
topheman · Jun 17, 2017 · 848884d · 848884d
1 parent 744efcc
commit 848884d
Show file tree

Hide file tree

Showing 3 changed files with 512 additions and 165 deletions.
diff --git a/package.json b/package.json
@@ -54,11 +54,10 @@
     "eslint-config-airbnb": "^5.0.1",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-react": "^3.16.1",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "2",
     "file-loader": "^0.8.5",
     "git-rev-sync": "^1.4.0",
     "html-webpack-plugin": "^2.9.0",
-    "json-loader": "^0.5.4",
     "lodash.template": "^4.2.2",
     "mocha": "^3.4.2",
     "moment": "^2.11.2",
@@ -70,8 +69,9 @@
     "serve": "^1.4.0",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.12.14",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
   },
-  "private": true
+  "private": true,
+  "dependencies": {}
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -53,14 +53,11 @@ if (!OPTIMIZE) {
 if (FAIL_ON_ERROR) {
   log.info('webpack', 'NoErrorsPlugin disabled, build will fail on error');
 }
-if (OPTIMIZE) {
-  log.info('webpack', 'OPTIMIZE: code will be compressed and deduped');
-}
 
 /** plugins setup */
 
 if(!FAIL_ON_ERROR) {
-  plugins.push(new webpack.NoErrorsPlugin());
+  plugins.push(new webpack.NoEmitOnErrorsPlugin());
 }
 
 plugins.push(new HtmlWebpackPlugin({
@@ -72,10 +69,12 @@ plugins.push(new HtmlWebpackPlugin({
   BANNER_HTML: BANNER_HTML
 }));
 // extract css into one main.css file
-plugins.push(new ExtractTextPlugin(`main${hash}.css`, {
+const extractSass = new ExtractTextPlugin({
+  filename: `main${hash}.css`,
   disable: false,
   allChunks: true
-}));
+});
+plugins.push(extractSass);
 plugins.push(new webpack.BannerPlugin(BANNER));
 plugins.push(new webpack.DefinePlugin({
   // Lots of library source code (like React) are based on process.env.NODE_ENV
@@ -89,14 +88,20 @@ plugins.push(new webpack.DefinePlugin({
 }));
 
 if (OPTIMIZE) {
-  plugins.push(new webpack.optimize.DedupePlugin());
   plugins.push(new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: true
     }
   }));
 }
 
+if (NODE_ENV !== 'production') {
+  // to keep compatibility with old loaders - debug: true was previously on config
+  plugins.push(new webpack.LoaderOptionsPlugin({
+    debug: true
+  }));
+}
+
 if (MODE_DEV_SERVER) {
   // webpack-dev-server mode
   if(LOCALHOST) {
@@ -130,7 +135,8 @@ if (LINTER) {
   preLoaders.push({
     test: /\.js$/,
     exclude: /node_modules/,
-    loader: 'eslint-loader'
+    loader: 'eslint-loader',
+    enforce: 'pre'
   });
 }
 else {
@@ -149,36 +155,38 @@ const config = {
     publicPath: '',
     filename: `[name]${hash}.js`,
     chunkFilename: `[id]${hash}.chunk.js`,
-    path: BUILD_DIR + '/' + DIST_DIR
+    path: path.join(__dirname, BUILD_DIR, DIST_DIR)
   },
   cache: true,
-  debug: NODE_ENV === 'production' ? false : true,
   devtool: OPTIMIZE ? false : 'sourcemap',
   devServer: {
     host: LOCALHOST ? 'localhost' : myLocalIp()
   },
   module: {
-    preLoaders: preLoaders,
-    loaders: [
+    rules: [
+      ...preLoaders,
       {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
       },
-      {
-        test: /\.json$/,
-        loader: 'json-loader'
-      },
       {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style-loader',
-          'css-loader?sourceMap!sass-loader?sourceMap=true&sourceMapContents=true&outputStyle=expanded&' +
-          'includePaths[]=' + (path.resolve(__dirname, './node_modules'))
-        )
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
+        use: extractSass.extract({
+          use: [{
+            loader: "css-loader",
+            query: JSON.stringify({
+              sourceMap: true
+            })
+          }, {
+            loader: "sass-loader",
+            query: JSON.stringify({
+              sourceMap: true
+            })
+          }],
+          // use style-loader in development
+          fallback: "style-loader"
+        })
       },
       { test: /\.(png)$/, loader: 'url-loader?limit=' + ASSETS_LIMIT + '&name=assets/[hash].[ext]' },
       { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=' + ASSETS_LIMIT + '&mimetype=application/font-woff&name=assets/[hash].[ext]' },