From 93e5395e7ffa211cabc69164384153d5d5567981 Mon Sep 17 00:00:00 2001
From: pengjie <37610029@qq.com>
Date: Thu, 4 Feb 2021 23:11:07 +0800
Subject: [PATCH] :sparkles: add source-map for example

---
 example/index.html        |   1 -
 example/webpack.config.js | 186 ++++++++++++++++++++------------------
 package.json              |   2 +-
 yarn.lock                 |   8 +-
 4 files changed, 102 insertions(+), 95 deletions(-)

diff --git a/example/index.html b/example/index.html
index 9da805c65..6c217c628 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,2 +1 @@
 <div id="app"></div>
-<script src="/dist/bundle.js"></script>
diff --git a/example/webpack.config.js b/example/webpack.config.js
index deb7e27be..034f492df 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -1,97 +1,105 @@
 const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 const VueLoaderPlugin = require('../lib/plugin')
 
-module.exports = {
-  mode: 'development',
-  entry: path.resolve(__dirname, './main.js'),
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
-    publicPath: '/dist/'
-  },
-  devServer: {
-    stats: "minimal",
-    contentBase: __dirname
-  },
-  module: {
-    rules: [
-      // { loader: require.resolve('./debugger') },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      // example to apply loader to a custom block without lang="xxx"
-      // this rule applies to <foo> blocks
-      {
-        resourceQuery: /blockType=foo/,
-        loader: 'babel-loader'
-      },
-      // example configuring preprocessor for <template lang="pug">
-      {
-        test: /\.pug$/,
-        oneOf: [
-          // this applies to <template lang="pug"> in Vue components
-          {
-            resourceQuery: /^\?vue/,
-            use: ['pug-plain-loader']
-          },
-          // this applies to pug imports inside JavaScript
-          {
-            use: ['raw-loader', 'pug-plain-loader']
-          }
-        ]
-      },
-      // example configuring CSS Modules
-      {
-        test: /\.css$/,
-        oneOf: [
-          // this applies to <style module>
-          {
-            resourceQuery: /module/,
-            use: [
-              'vue-style-loader',
-              {
-                loader: 'css-loader',
-                options: {
-                  modules: true,
-                  localIdentName: '[local]_[hash:base64:8]'
+module.exports = (env, options) => {
+  const isDevServer = !!options.$0.match(/webpack-dev-server$/)
+  return {
+    mode: 'development',
+    entry: path.resolve(__dirname, './main.js'),
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: 'bundle.js',
+      publicPath: isDevServer ? '/' : './'
+    },
+    devServer: {
+      stats: "minimal",
+      contentBase: __dirname
+    },
+    devtool: 'source-map',
+    module: {
+      rules: [
+        // { loader: require.resolve('./debugger') },
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader'
+        },
+        // example to apply loader to a custom block without lang="xxx"
+        // this rule applies to <foo> blocks
+        {
+          resourceQuery: /blockType=foo/,
+          loader: 'babel-loader'
+        },
+        // example configuring preprocessor for <template lang="pug">
+        {
+          test: /\.pug$/,
+          oneOf: [
+            // this applies to <template lang="pug"> in Vue components
+            {
+              resourceQuery: /^\?vue/,
+              use: ['pug-plain-loader']
+            },
+            // this applies to pug imports inside JavaScript
+            {
+              use: ['raw-loader', 'pug-plain-loader']
+            }
+          ]
+        },
+        // example configuring CSS Modules
+        {
+          test: /\.css$/,
+          oneOf: [
+            // this applies to <style module>
+            {
+              resourceQuery: /module/,
+              use: [
+                'vue-style-loader',
+                {
+                  loader: 'css-loader',
+                  options: {
+                    modules: true,
+                    localIdentName: '[local]_[hash:base64:8]'
+                  }
                 }
+              ]
+            },
+            // this applies to <style> or <style scoped>
+            {
+              use: [
+                'vue-style-loader',
+                'css-loader'
+              ]
+            }
+          ]
+        },
+        // exmaple configration for <style lang="scss">
+        {
+          test: /\.scss$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            {
+              loader: 'sass-loader',
+              // global data for all components
+              // this can be read from a scss file
+              options: {
+                data: '$color: red;'
               }
-            ]
-          },
-          // this applies to <style> or <style scoped>
-          {
-            use: [
-              'vue-style-loader',
-              'css-loader'
-            ]
-          }
-        ]
-      },
-      // exmaple configration for <style lang="scss">
-      {
-        test: /\.scss$/,
-        use: [
-          'vue-style-loader',
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            // global data for all components
-            // this can be read from a scss file
-            options: {
-              data: '$color: red;'
             }
-          }
-        ]
+          ]
+        }
+      ]
+    },
+    resolveLoader: {
+      alias: {
+        'vue-loader': require.resolve('../lib')
       }
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'index.html')
+      }),
+      new VueLoaderPlugin()
     ]
-  },
-  resolveLoader: {
-    alias: {
-      'vue-loader': require.resolve('../lib')
-    }
-  },
-  plugins: [
-    new VueLoaderPlugin()
-  ]
-}
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 647d6c7f4..796e2d47b 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "eslint": "^4.19.0",
     "eslint-plugin-vue-libs": "^2.1.0",
     "file-loader": "^1.1.11",
-    "html-webpack-plugin": "4.0.0-beta.14",
+    "html-webpack-plugin": "4.0.0",
     "javascript-stringify": "^1.6.0",
     "jest": "^23.5.0",
     "jsdom": "^11.6.2",
diff --git a/yarn.lock b/yarn.lock
index 445f209df..c6a232f8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5516,10 +5516,10 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
-html-webpack-plugin@4.0.0-beta.14:
-  version "4.0.0-beta.14"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.14.tgz#1d3dc299a89391c6fb84c6ed94e7ebe53a9261a0"
-  integrity sha512-gdThA8oCH7PbHMbezNW5LD+hjxXTzwhfi4XFDKKo5Gs0BR1IhVChEZN1ub4YEKQBmOYasdnCGGPEOFggdm9hNA==
+html-webpack-plugin@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-4.0.0.tgz#5b3343312554d16ba98d9b1a85348c77bf733b3a"
+  integrity sha1-WzNDMSVU0WupjZsahTSMd79zOzo=
   dependencies:
     html-minifier-terser "^5.0.1"
     loader-utils "^1.2.3"