webpack打包成功后，浏览器报错 require is not defined

Question

我这个项目比较老，是用node+vue+iframe写的，模拟了vue的spa，因为当初架子没考虑好使用并不是正常vue 那样的模块化开发，使用了iframe有许多问题，其中之一就是页面加载的资源太多，所以上级说要使用webpack，建一 个入口文件，把所有的文件通过import引入，打包的时候在终端里面显示是正常的，但是浏览器打开就报错了，请各位 大神不吝赐教！小弟在此感谢了！

webpack.config.js

  var path = require('path');
  var webpack = require('webpack');
  var htmlWebpackPlugin = require('html-webpack-plugin');
  var nodeExternals = require('webpack-node-externals');
  var CompressionPlugin = require("compression-webpack-plugin");

var config = {
  target: 'node',
  externals: [nodeExternals()],
  devtool: 'eval-source-map',
  entry: './main.js',
  output: {
    path:__dirname+ '/build',
    filename: 'bundle.js',
 },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015']
       }
     },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
       }
     },
  {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      // name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
    }
  },
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader',
    exclude:/node_modules/
   }
   ],
 },
  performance : {
   hints : false,
   maxEntrypointSize:400000
   }, 
  node: {
    fs: 'empty'
  },
  plugins:[
    new htmlWebpackPlugin({
      filename:'index.html',
   }),
new CompressionPlugin({
  asset: '[path].gz[query]', 
  algorithm: 'gzip',
  threshold: 10240,
  minRatio: 0.8
})
],
resolve: {
  extensions: [ '.js', '.css', '.vue'],
  modules: [path.join(__dirname,"./public" ),'./node_modules'],
  alias: {
    'hipchat-notifier': path.join(__dirname, './node_modules/log4js/lib/appenders/hipchat.js'),
    'mailgun-js': path.join(__dirname, './node_modules/log4js/lib/appenders/mailgun.js'),
    'loggly': path.join(__dirname, './node_modules/log4js/lib/appenders/loggly.js'),
    'slack-node': path.join(__dirname, './node_modules/log4js/lib/appenders/slack.js'),
    'nodemailer': path.join(__dirname, './node_modules/log4js/lib/appenders/smtp.js'),
    'sockjs': path.join(__dirname, './node_modules/webpack-dev-server/client/socket.js'),
    'jquery': path.join(__dirname, './public/js/jquery-form.js'),
    }
 },
 devServer: {
   port: 9529,
   historyApiFallback: true,
   stats: 'minimal', 
   overlay: true, 
   filename:'bundle.js'
},
}
module.exports = config;

package.json

  {
   "name": "we",
   "version": "1.0.0",
   "description": "we",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack-dev-server --content-base /build --inline --hot --open --progress --colors",
     "dev": "webpack --config webpack.config.js --progress --colors",
     "webpack": "webpack -d",
    "build": "webpack -p"
   },
   "author": "we",
   "license": "ISC",
   "dependencies": {
    "body-parser": "^1.16.1",
    "config-lite": "1.5.0",
     "connect-flash": "0.1.1",
    "cookie-parser": "^1.4.3",
    "ejs": "2.5.2",
    "excel-export": "^0.5.1",
    "express": "4.14.0",
    "express-formidable": "1.0.0",
    "express-session": "^1.14.2",
    "express-winston": "2.0.0",
    "fs": "0.0.1-security",
    "log4js": "^1.1.1",
     "needle": "^2.0.1",
    "node-xlsx": "^0.7.4",
    "os": "^0.1.1",
     "silly-datetime": "^0.1.2",
    "url": "^0.11.0",
    "winston": "2.2.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "compression-webpack-plugin": "^1.1.11",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "gulp": "^3.9.1",
    "html-webpack-plugin": "^3.0.6",
    "istanbul": "0.4.5",
    "mocha": "3.1.2",
    "path": "^0.12.7",
    "request": "^2.85.0",
    "style-loader": "^0.20.3",
    "supertest": "2.0.1",
    "url-loader": "^1.0.1",
    "webpack": "4.1.1",
    "webpack-cli": "^2.0.11",
    "webpack-dev-server": "^3.1.1",
    "webpack-node-externals": "^1.6.0"
  }
  

就是下图代码引起的报错

修改target:'web'

最后再次谢谢大家！

Answer 1

target: 'node' 自然是打包出的文件只能在node里运行了

Answer 2

这是你自己的文件还是库文件，这明显是commonjs的规范，浏览器不支持的，还没经过webpack处理

Answer 3

请问解决了吗？我也遇到了同样的问题，求赐教