请问此项目有升级到 webpack4 的计划吗？

[baijikang]

你好： 我们正考虑从 webpack 3.x 版本升级到 4.x 版本，因为看到了 vue-laoder v15 已经发布。 在我尝试升级的过程中遇到了一些问题，也参考了升级指南（vue-loader.vuejs.org/zh/migrating.html），构建过程比较顺利， 但是项目运行时，server 端总是报错如下： Error: render function or template not defined in component: anonymous 参考了很多资料也没有解决。 我看到这个项目还停留在 webpack 3.x 版本。 请问是否有升级计划。

谢谢。

[darkiron]

I use webpack 4 : https://github.com/darkiron/SSR-vue-template

[baijikang]

@darkiron 谢谢你的帮助，问题已经解决。 ：）

[mir134]

@baijikang @darkiron 这问题解决的关键点是那里？ 我用'mini-css-extract-plugin' 提取css 还是报Error: render function or template not defined in component: anonymous

[baijikang]

@mir134 我用'mini-css-extract-plugin' 提取css，是可以提出取出来，但是发现所有的都加载了，并没有按需加载，所以暂时先注释掉了。

可以参考以下代码。

// 生产环境 client 端 提取 css ，server 端不用， 开发环境 使用 vue-style-loader 内联到页面
function MiniCssExtractConfig () {
  // 打包出来太多 css 都加载了， 优化后再开发此功能
  // if (isProd) {
  //   if (isExtractCss) {
  //     return isClientBuild ? {
  //       loader: MiniCssExtractPlugin.loader,
  //       options: {
  //         publicPath: path.resolve(__dirname, '../dist')
  //       }
  //     } : emptyLoader
  //   }
  //   return 'vue-style-loader'
  // }
  return 'vue-style-loader'
}

module.exports = {

  mode: isProd ? 'production' : 'development',

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[chunkhash].js'
  },

  resolve: {
  },

  module: {
    noParse: /es6-promise\.js$/, // avoid webpack shimming process

    rules: [{
      test: /\.vue$/,
      use: [{
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      }, {
        loader: path.resolve(__dirname, './extend/loader/firstRender.js')
      }]
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      options: {
        'presets': [
          'react', ['env', {
            'modules': false
          }]
        ],
        'plugins': [
          'syntax-dynamic-import', [
            'component', [{
              'libraryName': 'element-ui',
              'styleLibraryName': 'theme-chalk'
            }]
          ]
        ]
      }
    },

    {
      test: /\.inlinestyl$/,
      use: [
        'css-loader?minimize',
        {
          loader: 'postcss-loader',
          options: {
            plugins: [
              require('autoprefixer')()
            ]
          }
        },
        'stylus-loader'
      ]
    },

    {
      test: /\.styl(us)?$/,
      oneOf: [
        // 这里匹配 `<style module>`
        {
          resourceQuery: /module/,
          use: [
            MiniCssExtractConfig(),
            {
              loader: 'css-loader?minimize',
              options: {
                modules: true,
                minimize: true,
                localIdentName: '[local]_[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')()
                ]
              }
            },
            'stylus-loader'
          ]
        },
        // 这里匹配普通的 `<style>` 或 `<style scoped>`
        {
          use: [
            MiniCssExtractConfig(),
            'css-loader?minimize',
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')()
                ]
              }
            },
            'stylus-loader'
          ]
        }
      ]
    },

    {
      test: /\.css$/,
      oneOf: [
        // 这里匹配 `<style module>`
        {
          resourceQuery: /module/,
          use: [
            MiniCssExtractConfig(),
            {
              loader: 'css-loader?minimize',
              options: {
                modules: true,
                localIdentName: '[local]_[hash:base64:5]'
              }
            }
          ]
        },
        // 这里匹配普通的 `<style>` 或 `<style scoped>`
        {
          use: [
            MiniCssExtractConfig(),
            'css-loader?minimize'
          ]
        }
      ]
    },

    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'url-loader?limit=8192&name=static/[name].[hash:8].[ext]'
    }, {
      test: /\.(woff2?)(\?.*)?$/,
      loader: 'url-loader?limit=30720&name=fonts/[name].[hash:7].[ext]'
    }, {
      test: /\.(eot|ttf|otf)(\?.*)?$/,
      loader: 'file-loader?name=fonts/[name].[hash:7].[ext]'
    }
    ]
  },

[ediaos]

我创建了一个基于CLI3-SSR 可工程化的项目，欢迎查看 vue-cli3-ssr-project

[ghost]

https://github.com/BengBu-YueZhang/custom-vue-ssr

I moved the project to webpack4

[oxgos]

https://github.com/oxgos/SSR-template

I use webpack 4