Question

我正在构建一个SSR Vue项目，我正在使用webpack来捆绑我的文件。服务器的捆绑文件工作正常，但客户端在控制台上显示错误，代码不起作用。

我使用这些脚本：

"scripts": {
    "serve": "cross-env NODE_ENV=serve webpack-dev-server --config webpack/webpack.client.js --open --inline --hot",
    "dev": "cross-env NODE_ENV=dev && npm run build-client && npm run build-server",
    "prod": "cross-env NODE_ENV=prod && npm run build-client && npm run build-server",
    "build-serve": "cross-env NODE_ENV=dev npm run build-server && npm run build-client && node server.js",
    "build-client": "webpack --config webpack/webpack.client.js --progress --bail",
    "build-server": "webpack --config webpack/webpack.server.js --progress --bail"
  }

这些是与webpack相关的包：

"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "^4.1.2"

奇怪的是当使用webpack-dev-server时，代码运行正常。此外，在捆绑服务器文件时，它会显示结果正常。但是当使用客户端捆绑文件时，它无法正常工作。

这是错误：

更新

webpack.client.js：

var path = require('path')
var webpack = require('webpack')
var merge = require('webpack-merge')
var base = require('./webpack.config')

base.resolve.modules = (base.resolve.modules || []).concat([

])
base.plugins = (base.plugins || []).concat([
  new webpack.DefinePlugin({
    isServer: false
  })
])

if (process.env.NODE_ENV == 'prod') {
  base.plugins = (base.plugins || []).concat([
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true
      },
      output: {
        comments: false
      }
    })
  ]);
}

module.exports = merge(base, {
  entry: path.resolve(__dirname, '../src/entry/client-entry.js'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: 'assets/build-client.js?[hash]',
  }

});

webpack.config.js：

var path = require('path')
var webpack = require('webpack')
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('assets/styles.css');


module.exports = {
  // devtool: "source-map",
  mode: 'none',
  module: {
    noParse: /es6-promise\.js$/, // avoid webpack shimming process
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.html$/,
        loader: 'raw-loader'
      },
      // {
      //   test: /\.js$/,
      //   loader: 'babel-loader',
      //   exclude: [/node_modules/, 'src/pages', 'src/components', 'src/layouts']
      // },
      {
        test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]?[hash]'
        }
      },
      {
        test: /\.scss$/,
        loader: extractCSS.extract('css-loader!sass-loader')
      },
      {
        test: /\.css$/,
        loader: 'vue-style-loader!css-loader'
      }
    ]
  },
  plugins: [
    extractCSS,
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|zh-tw)$/),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev')
        }
    }),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor'
    // }),
    // generate output HTML
  ],
  resolve: {
    modules: [
      'src',
      'node_modules',
    ],
    alias: {
      '_': 'lodash',
      'vue$': 'vue/dist/vue',
      'assets': path.resolve(__dirname, '../src/assets'),
    }
  },
  devServer: {//this handles the webpack router
    historyApiFallback: true,
    noInfo: true
  }
}

if (process.env.NODE_ENV != 'serve') {

  module.exports.plugins = (module.exports.plugins || []).concat([
    new CopyWebpackPlugin([
      {from: './assets', to: 'assets'},
      {from: './index.html'},
      {from: './index.server.html'}
    ])
  ])
}

if (process.env.NODE_ENV == 'prod') {
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Answer 1

我发现CopyWebpackPlugin插件会搞砸一切。我不知道为什么，但当我删除它时，一切正常。感谢。

Webpack 4捆绑错误的javascript

1 个答案: