Extract CSS

lin-toto · lin-toto · commit a02f9d848cc0 · 2018-01-25T23:12:16.000+09:00
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>luogu-markdown-editor</title>
+    <link rel="stylesheet" href="/dist/markdown-palettes.css" />
   </head>
   <body>
     <div id="editor"></div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "module": "src/module.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "prod-test": "cross-env NODE_ENV=production webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
     "build-dev": "cross-env NODE_ENV=development webpack --progress",
     "lint": "eslint --ext .js,.vue src/",
@@ -47,6 +48,7 @@
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-standard": "^3.0.1",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.4",
     "lodash-webpack-plugin": "^0.11.4",
     "url-loader": "^0.6.2",
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,48 +2,50 @@ const path = require('path')
 const webpack = require('webpack')
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 module.exports = {
     entry: ['./src/main.js'],
     output: {
         path: path.resolve(__dirname, './dist'),
-        publicPath: '/dist/',
-        filename: 'markdown-palettes.js'
+        filename: 'markdown-palettes.js',
+        publicPath: './'
     },
     plugins: [
         new LodashModuleReplacementPlugin(),
         new webpack.optimize.OccurrenceOrderPlugin(),
+        new ExtractTextPlugin('markdown-palettes.css'),
         new CleanWebpackPlugin(['dist'])
     ],
     module: {
         rules: [
-            {
-                test: /\.css$/,
-                use: [
-                    'vue-style-loader',
-                    'css-loader'
-                ],
-            },
             {
                 test: /\.vue$/,
                 loader: 'vue-loader',
                 options: {
                     loaders: {
-                    }
-                    // other vue-loader options go here
+                    },
+                    extractCSS: true
                 }
             },
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 exclude: /node_modules/
             },
+            {
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    use: 'css-loader',
+                    fallback: 'vue-style-loader'
+                })
+            },
             {
                 test: /\.(png|jpg|gif|svg|ttf|eot|woff|woff2)$/,
                 loader: 'url-loader',
                 options: {
-                    limit: 5000,
+                    limit: 8192,
                     name: '[name].[ext]?[hash]'
                 }
             }
@@ -58,7 +60,8 @@ module.exports = {
     devServer: {
         historyApiFallback: true,
         noInfo: true,
-        overlay: true
+        overlay: true,
+        publicPath: '/dist/'
     },
     performance: {
         hints: false
