鍍金池/ 問答/C++  HTML/ webpack打包成功后,瀏覽器報錯 require is not define

webpack打包成功后,瀏覽器報錯 require is not defined

我這個項目比較老,是用node+vue+iframe寫的,模擬了vue的spa,因為當(dāng)初架子沒考慮好使用并不是正常vue 那樣的模塊化開發(fā),使用了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'
圖片描述
最后再次謝謝大家!

回答
編輯回答
吃藕丑

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

2017年1月15日 04:40
編輯回答
不討囍

這是你自己的文件還是庫文件,這明顯是commonjs的規(guī)范,瀏覽器不支持的,還沒經(jīng)過webpack處理

2017年7月28日 04:45