Update to webpack 2

2025-12-09 06:43:24 +00:00 · 2017-02-25 13:15:24 +00:00
parent fe691d12c7
commit a9fdf73d86
4 changed files with 56 additions and 47 deletions
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
    ]
  },
  "devDependencies": {
-    "appcache-webpack-plugin": "^1.2.1",
+    "appcache-webpack-plugin": "^1.3.0",
    "babel-core": "*",
    "babel-eslint": "*",
    "babel-jest": "*",
@@ -68,9 +68,9 @@
    "eslint-plugin-react": "^4.0.0",
    "expose-loader": "^0.7.1",
    "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^0.9.1",
+    "extract-text-webpack-plugin": "2.0.0",
    "file-loader": "^0.8.4",
-    "html-webpack-plugin": "^1.7.0",
+    "html-webpack-plugin": "^2.28.0",
    "jest-cli": "^16.0.1",
    "jsen": "^0.6.0",
    "json-loader": "^0.5.3",
@@ -83,8 +83,8 @@
    "rollup-plugin-node-resolve": "2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
-    "webpack": "^1.9.6",
-    "webpack-dev-server": "^1.14.0"
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "babel-polyfill": "*",
--- a/src/index.html
+++ b/src/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html {%= o.htmlWebpackPlugin.options.appCache ? 'manifest=/' + o.htmlWebpackPlugin.options.appCache : '' %} >
+<html <%= htmlWebpackPlugin.options.appCache ? 'manifest=/' + htmlWebpackPlugin.options.appCache : '' %> >
  <head>
    <title>Coriolis EDCD Edition</title>
    <meta charset="UTF-8">
-    <link rel="stylesheet" href="{%= o.htmlWebpackPlugin.files.css[0] %}">
+    <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[0] %>">
    <!-- Standard headers -->
    <meta name="description" content="A ship builder, outfitting and comparison tool for Elite Dangerous">
    <meta name="mobile-web-app-capable" content="yes">
@@ -24,22 +24,22 @@
    <meta name="theme-color" content="#000000">

    <script>
-      window.CORIOLIS_GAPI_KEY = '{%= o.htmlWebpackPlugin.options.gapiKey %}';
-      window.CORIOLIS_VERSION = '{%= o.htmlWebpackPlugin.options.version %}';
-      window.CORIOLIS_DATE = '{%= new Date().toISOString().slice(0, 10)  %}';
+      window.CORIOLIS_GAPI_KEY = '<%- htmlWebpackPlugin.options.gapiKey %>';
+      window.CORIOLIS_VERSION = '<%- htmlWebpackPlugin.options.version %>';
+      window.CORIOLIS_DATE = '<%- new Date().toISOString().slice(0, 10)  %>';
    </script>
-    {% if (o.htmlWebpackPlugin.options.uaTracking) { %}
+    <% if (htmlWebpackPlugin.options.uaTracking) { %>
    <script>
      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-      ga('create', '{%= o.htmlWebpackPlugin.options.uaTracking %}', 'auto');
+      ga('create', '<%- htmlWebpackPlugin.options.uaTracking %>', 'auto');
      ga('send', 'pageview');
    </script>
    <script async src='https://www.google-analytics.com/analytics.js'></script>
-    {% } %}
+    <% } %>
  </head>
  <body style="background-color:#000;">
    <section id="coriolis"></section>
-    <script src="{%= o.htmlWebpackPlugin.files.chunks.lib.entry %}" charset="utf-8" crossorigin="anonymous"></script>
-    <script src="{%= o.htmlWebpackPlugin.files.chunks.app.entry %}" charset="utf-8" crossorigin="anonymous"></script>
+    <script src="<%= htmlWebpackPlugin.files.chunks.lib.entry %>" charset="utf-8" crossorigin="anonymous"></script>
+    <script src="<%= htmlWebpackPlugin.files.chunks.app.entry %>" charset="utf-8" crossorigin="anonymous"></script>
  </body>
 </html>
--- a/webpack.config.dev.js
+++ b/webpack.config.dev.js
@@ -27,7 +27,7 @@ module.exports = {
  },
  resolve: {
    // When requiring, you don't need to add these extensions
-    extensions: ['', '.js', '.jsx', '.json', '.less']
+    extensions: ['.js', '.jsx', '.json', '.less']
  },
  output: {
    path: path.join(__dirname, 'build'),
@@ -36,30 +36,34 @@ module.exports = {
  },
  plugins: [
    new CopyDirPlugin(path.join(__dirname, 'src/.htaccess'), ''),
-    new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js'),
+    new webpack.optimize.CommonsChunkPlugin({
+        name: 'lib',
+        filename: 'lib.js'
+    }),
    new HtmlWebpackPlugin({
        inject: false,
-        template: path.join(__dirname, "src/index.html"),
+        template: path.join(__dirname, "src/index.ejs"),
        version: pkgJson.version,
        gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
    }),
-    new ExtractTextPlugin('app.css', {
+    new ExtractTextPlugin({
+        filename: 'app.css', 
+        disable: false,
        allChunks: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
-    loaders: [
-      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader') },
-      { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader','css-loader!less-loader') },
-      { test: /\.(js|jsx)$/, loaders: [ 'babel' ], include: path.join(__dirname, 'src') },
-      { test: /\.json$/, loader: 'json-loader' },
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
+    rules: [
+      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) },
+      { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!less-loader'}) },
+      { test: /\.(js|jsx)$/, loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') },
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
    ]
  }
 };
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -29,7 +29,7 @@ module.exports = {
    lib: ['babel-polyfill', 'd3', 'react', 'react-dom', 'classnames', 'fbemitter', 'lz-string']
  },
  resolve: {
-    extensions: ['', '.js', '.jsx', '.json', '.less'],
+    extensions: ['.js', '.jsx', '.json', '.less'],
    alias: {
      'd3': d3Path,
      'react': reactPath,
@@ -45,12 +45,16 @@ module.exports = {
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
      mangle: {
        except: []
      },
      'screw-ie8': true
    }),
-    new webpack.optimize.CommonsChunkPlugin('lib', 'lib.[chunkhash:6].js'),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'lib',
+      filename: 'lib.[chunkhash:6].js'
+    }),
    new HtmlWebpackPlugin({
        inject: false,
        appCache: 'coriolis.appcache',
@@ -64,12 +68,14 @@ module.exports = {
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true
        },
-        template: path.join(__dirname, "src/index.html"),
+        template: path.join(__dirname, "src/index.ejs"),
        uaTracking: process.env.CORIOLIS_UA_TRACKING || '',
        gapiKey: process.env.CORIOLIS_GAPI_KEY || '',
        version: pkgJson.version
    }),
-    new ExtractTextPlugin('[contenthash:6].css', {
+    new ExtractTextPlugin({
+        filename: '[contenthash:6].css',
+        disable: false,
        allChunks: true
    }),
    new CopyDirPlugin(path.join(__dirname, 'src/schemas'), 'schemas'),
@@ -84,22 +90,21 @@ module.exports = {
    })
  ],
  module: {
-    noParse: [d3Path, reactPath, lzStringPath],
-    loaders: [
+    noParse: /.*\.min\.js$/,
+    rules: [
      // Expose non-parsed globally scoped libs
-      { test: reactPath, loader: "expose?React" },
-      { test: d3Path, loader: "expose?d3" },
-      { test: lzStringPath, loader: "expose?LZString" },
+      { test: reactPath, loader: "expose-loader?React" },
+      { test: d3Path, loader: "expose-loader?d3" },
+      { test: lzStringPath, loader: "expose-loader?LZString" },

-      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader') },
-      { test: /\.less$/, loader: ExtractTextPlugin.extract('style-loader','css-loader!less-loader') },
-      { test: /\.(js|jsx)$/, loaders: [ 'babel' ], include: path.join(__dirname, 'src') },
-      { test: /\.json$/, loader: 'json-loader' },
-      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
-      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
-      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
-      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
-      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
+      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}) },
+      { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader',use: 'css-loader!less-loader'}) },
+      { test: /\.(js|jsx)$/, loaders: [ 'babel-loader' ], include: path.join(__dirname, 'src') },
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
    ]
  }
 };