update webpack config

Author: cweijan

.vscode/tasks.json

@@ -28,7 +28,7 @@
                             "regexp": "webpack is watching the files"
                         },
                         "endsPattern": {
-                            "regexp": "extension = extension.js"
+                            "regexp": "Entrypoint HtmlWebpackPlugin_0"
                         }
                     }
                 }

package-lock.json

@@ -747,6 +747,7 @@
 		"cardinal": "^2.1.1",
 		"clean-webpack-plugin": "^3.0.0",
 		"css-loader": "^3.5.3",
+		"extract-text-webpack-plugin": "^4.0.0-beta.0",
 		"file-loader": "^6.0.0",
 		"html-webpack-plugin": "^4.3.0",
 		"style-loader": "^1.2.1",

package.json

@@ -2,59 +2,87 @@ const isProd = process.argv.indexOf('-p') >= 0;
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const { VueLoaderPlugin } = require('vue-loader')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
-module.exports = {
-    node: {
-        fs: 'empty', net: 'empty', tls: 'empty',
-        child_process: 'empty', dns: 'empty',
-        global: true, __dirname: true
+module.exports = [
+    {
+        target: "node",
+        node: {
+            fs: 'empty', net: 'empty', tls: 'empty',
+            child_process: 'empty', dns: 'empty',
+            global: true, __dirname: true
+        },
+        entry: ['./src/extension.ts'],
+        output: {
+            path: path.resolve(__dirname, 'out'),
+            filename: 'extension.js',
+            libraryTarget: 'commonjs2'
+        },
+        externals: {
+            vscode: 'commonjs vscode'
+        },
+        resolve: {
+            extensions: ['.ts', '.js']
+        },
+        module: { rules: [{ test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }] },
+        watch: !isProd,
+        optimization: {
+            minimize: false
+        },
+        mode: isProd ? 'production' : 'development',
+        devtool: isProd ? false : 'source-map',
     },
-    entry: {
-        extension: './src/extension.ts',
-        query: './src/vue/pages/result/main.js'
-    },
-    output: {
-        path: path.resolve(__dirname, 'out'),
-        filename: '[name].js',
-        devtoolModuleFilenameTemplate: '../[resource-path]'
-    },
-    externals: {
-        vscode: 'commonjs vscode'
-    },
-    resolve: {
-        extensions: ['.ts', '.vue', '.js'],
-        alias: {
-            'vue$': 'vue/dist/vue.esm.js',
-            '@': path.resolve('src'),
-        }
-    },
-    module: {
-        rules: [
-            { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ["vue-style-loader", "css-loader"], optimizeSSR: false } } },
-            { test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] },
-            { test: /\.css$/, use: ["vue-style-loader", 'css-loader'] },
-            {
-                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-                loader: 'url-loader',
-                options: {
-                    limit: 10000
-                }
+    {
+        entry: {
+            query: './src/vue/pages/result/main.js'
+        },
+        output: {
+            path: path.resolve(__dirname, 'out'),
+            filename: '[name].js'
+        },
+        resolve: {
+            extensions: ['.vue', '.js'],
+            alias: {
+                'vue$': 'vue/dist/vue.esm.js',
+                '@': path.resolve('src'),
             }
-        ]
-    },
-    plugins: [
-        new VueLoaderPlugin(),
-        new HtmlWebpackPlugin({
-            filename: '../resources/webview/pages/result/index.html', template: './src/vue/pages/result/index.html',
-            chunks: ['query'], inject: true
-        }),
-        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false })
-    ],
-    watch: !isProd,
-    optimization: {
-        minimize: isProd
-    },
-    mode: isProd ? 'production' : 'development',
-    devtool: isProd ? false : 'source-map',
-};
+        },
+        module: {
+            rules: [
+                // {
+                //     test: /index\.css$/, use: ExtractTextPlugin.extract({
+                //         fallback: "vue-style-loader",
+                //         use: "css-loader"
+                //     })
+                // },
+                { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { css: ["vue-style-loader", "css-loader"] } } },
+                {
+                    test: /\.css$/, use: ["vue-style-loader", "css-loader"]
+                },
+                {
+                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                    loader: 'url-loader',
+                    options: {
+                        limit: 80000
+                    }
+                }
+            ]
+        },
+        plugins: [
+            new ExtractTextPlugin("styles.css"),
+            new VueLoaderPlugin(),
+            new HtmlWebpackPlugin({
+                filename: '../resources/webview/pages/result/index.html', template: './src/vue/pages/result/index.html',
+                chunks: ['query'], inject: true
+            }),
+            new CleanWebpackPlugin({ cleanStaleWebpackAssets: false })
+        ],
+        watch: !isProd,
+        optimization: {
+            minimize: false
+        },
+        mode: isProd ? 'production' : 'development',
+        devtool: isProd ? false : 'source-map',
+    }
+];