Move bootstrap to node dependency
authorHugo Delahousse <hugo.delahousse@logilab.fr>
Mon, 03 Jul 2017 12:02:06 +0200
changeset 246 0bc5f2d1871a
parent 245 ad59d03502e2
child 247 307dc63312aa
Move bootstrap to node dependency Bootstrap is now included by webpack rather than being fetched online Add different loader to webpack/common.config.js They allow webpack to load and bundle non javascript files, like css, fonts or vector files
package.json
src/index.ejs
src/index.js
webpack/common.config.js
--- a/package.json	Fri Jun 30 16:19:51 2017 +0200
+++ b/package.json	Mon Jul 03 12:02:06 2017 +0200
@@ -8,9 +8,11 @@
   },
   "dependencies": {
     "babel-loader": "^6.2.10",
+    "bootstrap": "^3.3.7",
     "lodash": "^4.12.0",
     "prop-types": "^15.5.8",
     "react": "^15",
+    "react-bootstrap": "^0.31.0",
     "react-dom": "^15",
     "react-jsonschema-form": "^0.48.2",
     "whatwg-fetch": "^0.11.0"
@@ -24,15 +26,18 @@
     "babel-register": "^6.7.2",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
+    "css-loader": "^0.28.4",
     "diff": "^3.2.0",
     "enzyme": "^2.8.2",
     "eslint": "^4.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-mocha": "^4.11.0",
     "eslint-plugin-react": "^6.7.1",
+    "file-loader": "^0.11.2",
     "html-webpack-plugin": "^2.28.0",
     "http-link-header": "^0.8.0",
     "intersperse": "^1.0.0",
+    "jquery": "^3.2.1",
     "json-loader": "^0.5.4",
     "jsonary": "0.0.16",
     "karma": "^1.5.0",
@@ -53,6 +58,8 @@
     "react-test-renderer": "^15.5.4",
     "script-loader": "^0.7.0",
     "sinon": "^2.1.0",
+    "style-loader": "^0.18.2",
+    "url-loader": "^0.5.9",
     "webpack": "^2.3.1",
     "webpack-dev-server": "^2.4.2"
   },
--- a/src/index.ejs	Fri Jun 30 16:19:51 2017 +0200
+++ b/src/index.ejs	Mon Jul 03 12:02:06 2017 +0200
@@ -6,8 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><%= htmlWebpackPlugin.options.title %></title>
 
-    <!-- Bootstrap core CSS -->
-    <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -20,10 +18,5 @@
 
     <div id="app"></div>
 
-    <!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="//oss.maxcdn.com/libs/jquery/1.10.2/jquery.min.js"></script>
-    <script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
   </body>
 </html>
--- a/src/index.js	Fri Jun 30 16:19:51 2017 +0200
+++ b/src/index.js	Mon Jul 03 12:02:06 2017 +0200
@@ -7,6 +7,8 @@
 import {AddRelated} from './components/Entity';
 import {Resource} from './components/Resource';
 
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/js/bootstrap.js';
 import "script-loader!jsonary/super-bundle/jsonary-super-bundle.js";
 
 const appElement = document.getElementById('app');
--- a/webpack/common.config.js	Fri Jun 30 16:19:51 2017 +0200
+++ b/webpack/common.config.js	Mon Jul 03 12:02:06 2017 +0200
@@ -12,17 +12,44 @@
         publicPath: "/",
     },
     module: {
-        rules: [{
-            test: /\.js$/,
-            exclude: /node_modules/,
-            loader: "babel-loader",
-            query: {
-                presets: ['es2015'],
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: "babel-loader",
+                query: {
+                    presets: ['es2015'],
+                },
+            },
+            {
+                test: /\.css$/,
+                loader: "style-loader!css-loader",
             },
-        }],
+            {
+                test: /\.(woff|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'
+            }
+        ],
     },
     plugins: [
         // new webpack.optimize.CommonsChunkPlugin("bundle-ext.js"),
         new webpack.IgnorePlugin(/^(buffertools)$/), // unwanted "deeper" dependency
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery",
+            "window.jQuery": "jquery",
+        })
     ],
 };