feat: update examples to webpack4, fix security issue

shepherdwind · Mar 13, 2019 · 9921ce8 · 9921ce8
1 parent ef8506e
commit 9921ce8
Show file tree

Hide file tree

Showing 31 changed files with 144 additions and 303 deletions.
diff --git a/README.md b/README.md
@@ -97,6 +97,8 @@ Config file example should like this
   }
 ```
 
+See more examples code from https://github.com/shepherdwind/css-hot-loader/tree/v1.4.3/examples
+
 ### options
 
 #### fileMap

diff --git a/examples/code-split/.gitignore b/examples/code-split/.gitignore
diff --git a/examples/code-split/index.html b/examples/code-split/index.html
diff --git a/examples/code-split/package.json b/examples/code-split/package.json
diff --git a/examples/code-split/src/common.css b/examples/code-split/src/common.css
diff --git a/examples/code-split/src/index.css b/examples/code-split/src/index.css
diff --git a/examples/code-split/src/index.js b/examples/code-split/src/index.js
diff --git a/examples/code-split/src/index2.js b/examples/code-split/src/index2.js
diff --git a/examples/code-split/webpack.config.js b/examples/code-split/webpack.config.js
diff --git a/examples/commons-chunk/dist/index.html b/examples/commons-chunk/dist/index.html
diff --git a/examples/commons-chunk/index.html b/examples/commons-chunk/index.html
@@ -5,15 +5,17 @@
   <title>css hot loader example</title>
 
   <link rel="stylesheet" href="css/common.css">
-  <link rel="stylesheet" href="css/output.css">
+  <link rel="stylesheet" href="css/a.css">
+  <link rel="stylesheet" href="css/b.css">
 </head>
 <body>
 
   <!-- React stuff -->
-  <div id="root"> hello world</div>
+  <div id="root"> hello world <div class="sub">sub message</div></div>
 
   <script src="dist/common.js"></script> <!-- webpack javascript output -->
-  <script src="dist/output.js"></script> <!-- webpack javascript output -->
+  <script src="dist/a.js"></script> <!-- webpack javascript output -->
+  <script src="dist/b.js"></script> <!-- webpack javascript output -->
 
 </body>
 </html>

diff --git a/examples/commons-chunk/package.json b/examples/commons-chunk/package.json
@@ -5,19 +5,20 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --progress",
-    "start": "webpack --progress && webpack-dev-server -d --hot --config webpack.config.js --watch --progress"
+    "start": "webpack-dev-server"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "css-hot-loader": "^1.0.4",
     "css-loader": "^0.28.0",
-    "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
+    "mini-css-extract-plugin": "^0.5.0",
     "style-loader": "^0.16.1",
-    "webpack": "^2.3.3",
-    "webpack-dev-server": "^2.4.2"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.11"
   }
 }
 
diff --git a/examples/commons-chunk/src/b.css b/examples/commons-chunk/src/b.css
@@ -0,0 +1,4 @@
+#root .sub {
+  text-align: center;
+  font-size: 24px;
+}
diff --git a/examples/commons-chunk/src/b.js b/examples/commons-chunk/src/b.js
@@ -0,0 +1,4 @@
+const say = require('./common');
+require('./b.css');
+console.log('hello b.js');
+say.hello();
diff --git a/examples/commons-chunk/src/common.js b/examples/commons-chunk/src/common.js
@@ -1,2 +1,6 @@
 require('./common.css');
-console.log('hello world');
+const path = require('path');
+
+exports.hello = function() {
+  console.log('hello world common', path.join('a', 'b'));
+}
diff --git a/examples/commons-chunk/src/index.js b/examples/commons-chunk/src/index.js
@@ -1,2 +1,4 @@
+const say = require('./common');
 require('./index.css');
-console.log('hello world');
+console.log('hello world index.js');
+say.hello();
diff --git a/examples/commons-chunk/webpack.config.js b/examples/commons-chunk/webpack.config.js
@@ -1,11 +1,12 @@
 const webpack = require('webpack'); // webpack itself
 const path = require('path'); // nodejs dependency when dealing with paths
-const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); // require webpack plugin
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 let config = { // config object
+  mode: 'development',
   entry: {
-    common: './src/common.js',
-    output: './src/index.js', // entry file
+    a: './src/index.js', // entry file
+    b: './src/b.js',
   },
   output: { // output
     path: path.resolve(__dirname, '.'), // ouput path
@@ -15,29 +16,44 @@ let config = { // config object
     rules: [
       {
         test: /\.css/,
-        use: [{
-          loader: 'css-hot-loader',
-          options: {
-            fileMap: '../css/{fileName}',
+        use: [
+          {
+            loader: 'css-hot-loader',
+            options: {
+              fileMap: '../css/{fileName}',
+              reloadAll: true,
+            },
           },
-        }].concat(ExtractTextWebpackPlugin.extract({  // HMR for styles
-          fallback: 'style-loader',
-          use: ['css-loader'],
-        })),
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
       },
     ] // end rules
   },
+
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        common: {
+          name: "common",
+          chunks: "all",
+          minChunks: 2,
+          minSize: 0,
+        },
+      }
+    }
+  },
+
   plugins: [ // webpack plugins
-    new ExtractTextWebpackPlugin('css/[name].css'),
-    new webpack.optimize.CommonsChunkPlugin({ name: 'common' }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+      chunkFilename: "css/[id].css",
+    }),
   ],
   devServer: {
     contentBase: path.resolve(__dirname, '.'),
-    inline: true,
-    compress: true, // Enable gzip compression for everything served:
     hot: true // Enable webpack's Hot Module Replacement feature
   },
-  devtool: 'eval-source-map', // enable devtool for better debugging experience
 }
 
 module.exports = config;
diff --git a/examples/css-modules/package.json b/examples/css-modules/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --progress",
-    "start": "NODE_ENV=development webpack-serve --port 3000 --config webpack.config.js"
+    "start": "webpack-dev-server"
   },
   "keywords": [],
   "author": "",
@@ -14,9 +14,8 @@
     "css-hot-loader": "latest",
     "css-loader": "^1.0.0",
     "mini-css-extract-plugin": "^0.4.0",
-    "webpack": "^4.1.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.1",
-    "webpack-serve": "^2.0.2"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.11"
   }
 }
diff --git a/examples/css-modules/webpack.config.js b/examples/css-modules/webpack.config.js
@@ -45,7 +45,10 @@ const config = { // config object
     new MiniCssExtractPlugin('[name].css'),
   ],
   devtool: 'source-map',
-  serve: {},
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    hot: true,
+  },
 };
 
 module.exports = config;
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -5,18 +5,19 @@
   "main": "index.js",
   "scripts": {
     "build": "webpack --progress",
-    "start": "webpack --progress && webpack-dev-server -d --hot --config webpack.config.js --watch --progress"
+    "start": "webpack-dev-server"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "css-hot-loader": "^1.0.4",
     "css-loader": "^0.28.0",
-    "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
+    "mini-css-extract-plugin": "^0.5.0",
     "style-loader": "^0.18.2",
-    "webpack": "^2.3.3",
-    "webpack-dev-server": "^2.4.2"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.11"
   }
 }
diff --git a/examples/simple/src/bar.css b/examples/simple/src/bar.css
@@ -1,5 +1,5 @@
 .bar {
   color: #ddd;
-  font-size: 50px;
+  font-size: 40px;
   text-align: center;
-}
+}
diff --git a/examples/simple/src/index.css b/examples/simple/src/index.css
@@ -6,5 +6,5 @@ body {
   text-align: center;
   padding-top: 100px;
   color: #666;
-  font-size: 30px;
+  font-size: 50px;
 }
diff --git a/examples/simple/webpack.config.js b/examples/simple/webpack.config.js
@@ -1,6 +1,6 @@
 const webpack = require('webpack'); // webpack itself
 const path = require('path'); // nodejs dependency when dealing with paths
-const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); // require webpack plugin
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 let config = { // config object
   entry: {
@@ -11,25 +11,25 @@ let config = { // config object
     path: path.resolve(__dirname, 'dist'), // ouput path
     filename: '[name].js',
   },
+  mode: 'development',
   module: {
     rules: [
       {
         test: /\.css/,
-        use: ['css-hot-loader'].concat(ExtractTextWebpackPlugin.extract({  // HMR for styles
-          fallback: 'style-loader',
-          use: ['css-loader'],
-        })),
+        use: [
+          'css-hot-loader',
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+        ],
       },
     ] // end rules
   },
   plugins: [ // webpack plugins
-    new ExtractTextWebpackPlugin('[name].css'),
+    new MiniCssExtractPlugin('[name].css'),
   ],
   devServer: {
-    contentBase: path.resolve(__dirname, 'dist'),
-    inline: true,
-    compress: true, // Enable gzip compression for everything served:
-    hot: true // Enable webpack's Hot Module Replacement feature
+    contentBase: path.join(__dirname, 'dist'),
+    hot: true,
   },
   devtool: 'eval-source-map', // enable devtool for better debugging experience
 }