Jan 12, 2020 · Jan 12, 2020 · Jan 12, 2020
diff --git a/.babelrc b/.babelrc
 {
  "presets": [
    ["env", { "modules": false }]
  ],
  "plugins": [
    "syntax-dynamic-import"
  ]
 }
  "presets": ["@babel/env"]
 }
diff --git a/build/setup-dev-server.js b/build/setup-dev-server.js
  clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
  clientConfig.output.filename = '[name].js'
  clientConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
    new webpack.HotModuleReplacementPlugin()
  )

  // dev middleware
  const clientCompiler = webpack(clientConfig)
  const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
    publicPath: clientConfig.output.publicPath,
    serverSideRender: true,
    noInfo: true
  })
  app.use(devMiddleware)
  clientCompiler.plugin('done', stats => {


  clientCompiler.hooks.done.tap('vue-hmr', stats => {
    stats = stats.toJson()
    stats.errors.forEach(err => console.error(err))
    stats.warnings.forEach(err => console.warn(err))
    ))
    update()
  })


  // hot middleware
  app.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))
    // read bundle generated by vue-ssr-webpack-plugin
    bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
    update()
  })
  });

  return readyPromise
 }
diff --git a/build/webpack.base.config.js b/build/webpack.base.config.js
 const path = require('path')
 const webpack = require('webpack')
 constExtractTextPlugin = require('extract-text-webpack-plugin')
 constMiniCssExtractPlugin = require("mini-css-extract-plugin");
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const { VueLoaderPlugin } = require('vue-loader')

 const isProd = process.env.NODE_ENV === 'production'

 const mode = process.env.NODE_ENV || 'development';
 // https://www.namecheap.com/blog/production-ready-vue-ssr-in-5-simple-steps/
 module.exports = {
  devtool: isProd
    ? false
    publicPath: '/dist/',
    filename: '[name].[chunkhash].js'
  },
  mode,
  resolve: {
    alias: {
      'public': path.resolve(__dirname, '../public')
    }
  },
  //https://stackoverflow.com/questions/49017682/webpack-4-migration-commonschunkplugin
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          name: "vendors"
        }
      }
    },
    // mimimize default in production
  },
  module: {
    noParse: /es6-promise\.js$/, // avoid webpack shimming process
    rules: [
        loader: 'url-loader',
        options: {
          limit: 10000,
          esModule: false,
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.styl(us)?$/,
        use: isProd
          ? ExtractTextPlugin.extract({
              use: [
                {
                  loader: 'css-loader',
                  options: { minimize: true }
                },
                'stylus-loader'
              ],
              fallback: 'vue-style-loader'
            })
          : ['vue-style-loader', 'css-loader', 'stylus-loader']
        test: /\.(styl(us))?$/,
        use: ['vue-style-loader', 'css-loader', 'stylus-loader']
      },
      {
        test: /\.css$/,
        //exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, 'css-loader',
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: [
                require("postcss-import"),
                //require("tailwindcss"),
                require("autoprefixer")
              ]
            }
          }
        ],
      }

    ]
  },
  performance: {
  plugins: isProd
    ? [
        new VueLoaderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
          compress: { warnings: false }
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new ExtractTextPlugin({
        new MiniCssExtractPlugin({
          filename: 'common.[chunkhash].css'
        })
      ]
    : [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({}),
        new FriendlyErrorsPlugin()
      ]
 }
diff --git a/build/webpack.client.config.js b/build/webpack.client.config.js
 const SWPrecachePlugin = require('sw-precache-webpack-plugin')
 const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

 const mode = process.env.NODE_ENV || 'development';

 const config = merge(base, {
  entry: {
    app: './src/entry-client.js'
      'create-api': './create-api-client.js'
    }
  },

  plugins: [
    // strip dev-only code in Vue source
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.NODE_ENV': JSON.stringify(mode),
      'process.env.VUE_ENV': '"client"'
    }),
    // extract vendor chunks for better caching
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // a module is extracted into the vendor chunk if...
        return (
          // it's inside node_modules
          /node_modules/.test(module.context) &&
          // and not a CSS file (due to extract-text-webpack-plugin limitation)
          !/\.css$/.test(module.request)
        )
      }
    }),
    // extract webpack runtime & manifest to avoid vendor chunk hash changing
    // on every build.
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),
    new VueSSRClientPlugin()
  ]
 })
Original file line number	Diff line number	Diff line change
		@@ -1,8 +1,3 @@
		{
		"presets": [
		["env", { "modules": false }]
		],
		"plugins": [
		"syntax-dynamic-import"
		]
		}
		"presets": ["@babel/env"]
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,18 +41,20 @@ module.exports = function setupDevServer (app, templatePath, cb) {
		clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
		clientConfig.output.filename = '[name].js'
		clientConfig.plugins.push(
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NoEmitOnErrorsPlugin()
		new webpack.HotModuleReplacementPlugin()
		)

		// dev middleware
		const clientCompiler = webpack(clientConfig)
		const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
		publicPath: clientConfig.output.publicPath,
		serverSideRender: true,
		noInfo: true
		})
		app.use(devMiddleware)
		clientCompiler.plugin('done', stats => {


		clientCompiler.hooks.done.tap('vue-hmr', stats => {
		stats = stats.toJson()
		stats.errors.forEach(err => console.error(err))
		stats.warnings.forEach(err => console.warn(err))
Expand All		@@ -63,6 +65,7 @@ module.exports = function setupDevServer (app, templatePath, cb) {
		))
		update()
		})


		// hot middleware
		app.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))
Expand All		@@ -79,7 +82,7 @@ module.exports = function setupDevServer (app, templatePath, cb) {
		// read bundle generated by vue-ssr-webpack-plugin
		bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
		update()
		})
		});

		return readyPromise
		}
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,12 @@
		const path = require('path')
		const webpack = require('webpack')
		constExtractTextPlugin = require('extract-text-webpack-plugin')
		constMiniCssExtractPlugin = require("mini-css-extract-plugin");
		const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
		const { VueLoaderPlugin } = require('vue-loader')

		const isProd = process.env.NODE_ENV === 'production'

		const mode = process.env.NODE_ENV \|\| 'development';
		// https://www.namecheap.com/blog/production-ready-vue-ssr-in-5-simple-steps/
		module.exports = {
		devtool: isProd
		? false
Expand All		@@ -15,11 +16,23 @@ module.exports = {
		publicPath: '/dist/',
		filename: '[name].[chunkhash].js'
		},
		mode,
		resolve: {
		alias: {
		'public': path.resolve(__dirname, '../public')
		}
		},
		//https://stackoverflow.com/questions/49017682/webpack-4-migration-commonschunkplugin
		optimization: {
		splitChunks: {
		cacheGroups: {
		vendors: {
		name: "vendors"
		}
		}
		},
		// mimimize default in production
		},
		module: {
		noParse: /es6-promise\.js$/, // avoid webpack shimming process
		rules: [
Expand All		@@ -42,24 +55,32 @@ module.exports = {
		loader: 'url-loader',
		options: {
		limit: 10000,
		esModule: false,
		name: '[name].[ext]?[hash]'
		}
		},
		{
		test: /\.styl(us)?$/,
		use: isProd
		? ExtractTextPlugin.extract({
		use: [
		{
		loader: 'css-loader',
		options: { minimize: true }
		},
		'stylus-loader'
		],
		fallback: 'vue-style-loader'
		})
		: ['vue-style-loader', 'css-loader', 'stylus-loader']
		test: /\.(styl(us))?$/,
		use: ['vue-style-loader', 'css-loader', 'stylus-loader']
		},
		{
		test: /\.css$/,
		//exclude: /node_modules/,
		use: [MiniCssExtractPlugin.loader, 'css-loader',
		{
		loader: "postcss-loader",
		options: {
		ident: "postcss",
		plugins: [
		require("postcss-import"),
		//require("tailwindcss"),
		require("autoprefixer")
		]
		}
		}
		],
		}

		]
		},
		performance: {
Expand All		@@ -68,16 +89,13 @@ module.exports = {
		plugins: isProd
		? [
		new VueLoaderPlugin(),
		new webpack.optimize.UglifyJsPlugin({
		compress: { warnings: false }
		}),
		new webpack.optimize.ModuleConcatenationPlugin(),
		new ExtractTextPlugin({
		new MiniCssExtractPlugin({
		filename: 'common.[chunkhash].css'
		})
		]
		: [
		new VueLoaderPlugin(),
		new MiniCssExtractPlugin({}),
		new FriendlyErrorsPlugin()
		]
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,6 +4,8 @@ const base = require('./webpack.base.config')
		const SWPrecachePlugin = require('sw-precache-webpack-plugin')
		const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

		const mode = process.env.NODE_ENV \|\| 'development';

		const config = merge(base, {
		entry: {
		app: './src/entry-client.js'
Expand All		@@ -13,30 +15,13 @@ const config = merge(base, {
		'create-api': './create-api-client.js'
		}
		},

		plugins: [
		// strip dev-only code in Vue source
		new webpack.DefinePlugin({
		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV \|\| 'development'),
		'process.env.NODE_ENV': JSON.stringify(mode),
		'process.env.VUE_ENV': '"client"'
		}),
		// extract vendor chunks for better caching
		new webpack.optimize.CommonsChunkPlugin({
		name: 'vendor',
		minChunks: function (module) {
		// a module is extracted into the vendor chunk if...
		return (
		// it's inside node_modules
		/node_modules/.test(module.context) &&
		// and not a CSS file (due to extract-text-webpack-plugin limitation)
		!/\.css$/.test(module.request)
		)
		}
		}),
		// extract webpack runtime & manifest to avoid vendor chunk hash changing
		// on every build.
		new webpack.optimize.CommonsChunkPlugin({
		name: 'manifest'
		}),
		new VueSSRClientPlugin()
		]
		})
Expand Down