build site

build.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+rm -rf dist
+mkdir dist
+./node_modules/.bin/webpack --config webpack.prod.config.js
+cp dist/index.html index.html

examples/index.html

@@ -8,6 +8,5 @@
       <router-view></router-view>
     </div>
 </body>
-<script src="/dist/build.js"></script>
 
 </html>

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
     "test": "karma start test/karma.conf.js --single-run",
+    "build": "sh build.sh",
     "lint": "eslint -c ./.eslintrc --fix --ext .js ./src/",
     "lint:style": "stylelint \"./src/**/*.less\" --syntax less"
   },
@@ -45,6 +46,7 @@
     "eslint": "^4.7.2",
     "eslint-plugin-html": "^3.2.2",
     "eslint-plugin-vue-libs": "^1.2.1",
+    "extract-text-webpack-plugin": "^3.0.2",
     "html-webpack-plugin": "^2.30.1",
     "istanbul-instrumenter-loader": "^3.0.0",
     "karma": "^1.4.1",
@@ -73,6 +75,7 @@
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.13",
     "webpack": "^3.6.0",
+    "webpack-chunk-hash": "^0.5.0",
     "webpack-dev-server": "^2.8.2"
   },
   "dependencies": {

webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path')
-const webpack = require('webpack')
+// const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 
 module.exports = {
   entry: {
@@ -9,7 +10,7 @@ module.exports = {
   },
   output: {
     path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
+    publicPath: '/',
     filename: 'build.js',
   },
   module: {
@@ -53,9 +54,10 @@ module.exports = {
   },
   devServer: {
     port: 3000,
-    inline: true,
     historyApiFallback: {
-      index: 'examples/index.html',
+      rewrites: [
+        { from: /.*/, to: '/index.html' },
+      ],
     },
     disableHostCheck: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
@@ -66,23 +68,10 @@ module.exports = {
   devtool: '#source-map',
 }
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
 module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
+  new HtmlWebpackPlugin({
-      'process.env': {
+    template: 'examples/index.html',
-        NODE_ENV: '"production"',
+    filename: 'index.html',
-      },
+    inject: true,
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false,
-      },
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true,
   }),
 ])
-}

webpack.prod.config.js

@@ -0,0 +1,97 @@
+const path = require('path')
+const webpack = require('webpack')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const WebpackChunkHash = require('webpack-chunk-hash')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const modulePlugin = new ExtractTextPlugin({
+  filename: '[name].[chunkhash].css',
+  allChunks: true,
+})
+
+module.exports = {
+  entry: {
+    index: [
+      './examples/index.js',
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: './dist/',
+    filename: '[name].[chunkhash].js',
+    chunkFilename: '[chunkhash].async.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader', exclude: /node_modules/,
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]',
+        },
+      },
+      {
+        test: /\.less$/,
+        use: modulePlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+            },
+            { loader: 'less-loader',
+            },
+          ],
+        }),
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.vue'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      'antd': path.join(__dirname, 'components'),
+    },
+  },
+}
+// http://vue-loader.vuejs.org/en/workflow/production.html
+module.exports.plugins = (module.exports.plugins || []).concat([
+  new webpack.DefinePlugin({
+    'process.env': {
+      NODE_ENV: '"production"',
+    },
+  }),
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'manifest',
+    minChunks: Infinity,
+  }),
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'vender',
+    minChunks: function (module) {
+      return module.context && ~module.context.indexOf('node_modules')
+    },
+  }),
+  new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      warnings: false,
+    },
+  }),
+  new HtmlWebpackPlugin({
+    template: './examples/index.html',
+    inject: true,
+    minify: { collapseWhitespace: true },
+    production: true,
+  }),
+  new webpack.LoaderOptionsPlugin({
+    minimize: true,
+  }),
+  modulePlugin,
+  new WebpackChunkHash({ algorithm: 'md5' }),
+])