鍍金池/ 問(wèn)答/HTML/ webpack4打包之后報(bào)了奇怪的錯(cuò)誤?

webpack4打包之后報(bào)了奇怪的錯(cuò)誤?

我在項(xiàng)目webpack的升級(jí)過(guò)程中,遇到了問(wèn)題,就是打包到最后,會(huì)報(bào)出錯(cuò)誤:
圖片描述

我總感覺(jué)第一個(gè)錯(cuò)誤是某個(gè)低級(jí)失誤導(dǎo)致的,但是一直不知道哪里出了問(wèn)題,package.json文件應(yīng)該書(shū)寫(xiě)正常的:

{
  "name": "mercury",
  "version": "4.5.0",
  "scripts": {
    "buildlib": "yarn buildlib:prod",
    "buildlib:debug": "NODE_ENV=debug webpack --config webpack.dll.config.js",
    "buildlib:prod": "NODE_ENV=production webpack --config webpack.dll.config.js",
    "prestart": "cp -rv src/vendors/* dist/",
    "start": "cp deploy/env/dev/config.env.js src/scripts/common/config.env.js && webpack-dev-server --inline --progress",
    "build": "yarn build:prod",
    "build:debug": "COMMIT_ID=$(git rev-parse --short HEAD) NODE_ENV=debug webpack --progress --profile --colors",
    "build:prod": "COMMIT_ID=$(git rev-parse --short HEAD) NODE_ENV=production webpack --progress --profile --colors",
    "config": "yarn config:production",
    "config:development": "NODE_ENV=development node bin/get_config.js",
    "config:production": "NODE_ENV=production node bin/get_config.js",
    "upload": "node bin/upload_oss.js",
    "debug": "yarn buildlib:debug && yarn build:debug && yarn prestart && mkdir -p public && cp -R dist/* public/",
    "lint:git": "eslint `git diff-index --name-only HEAD | grep -E '.(js|jsx)$'`",
    "lint": "eslint --ext .js --ext .jsx .",
    "lint:fix": "eslint --fix --ext .js --ext .jsx .",
    "precommit": "npm run lint:git",
    "inspect": "jsinspect ./src/scripts",
    "commitmsg": "commit-message-validator"
  },
  "config": {
    "commit-message-validator": {
      "pattern": [
        "^\\s*refs\\s+#SMART-\\d+\\s+.+$"
      ]
    }
  },
  "devDependencies": {
    "add-asset-html-webpack-plugin": "^2.0.1",
    "aliyun-sdk": "^1.11.2",
    "babel-core": "^6.1.2",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-antd": "^0.4.0",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-transform-runtime": "^6.4.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-react": "^6.1.2",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.3.19",
    "commit-message-validator": "^0.1.6",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^2.0.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.18.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-jsx-a11y": "^5.0.1",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-react": "^6.10.3",
    "eslint-plugin-standard": "^3.0.1",
    "extract-text-webpack-plugin": "next",
    "file-loader": "^1.1.11",
    "happypack": "next",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^0.13.3",
    "jsinspect": "^0.12.7",
    "json-loader": "^0.5.7",
    "merge-stream": "^1.0.0",
    "mime": "^2.2.0",
    "node-sass": "^3.4.1",
    "react-hot-loader": "^1.3.1",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "walkdir": "^0.0.12",
    "webpack": "4",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "3.1.1"
  },
  "dependencies": {
    "antd": "2.11.0",
    "autosize": "^3.0.20",
    "better-scroll": "^1.8.1",
    "fast-uglifyjs-plugin": "^0.3.0",
    "fingerprintjs2": "^1.6.1",
    "font-awesome": "^4.4.0",
    "history": "^2.1.2",
    "lodash.chunk": "^4.2.0",
    "lodash.clonedeep": "^4.5.0",
    "lodash.merge": "^4.6.0",
    "mini-css-extract-plugin": "^0.4.0",
    "moment-timezone": "^0.5.14",
    "node-uuid": "^1.4.7",
    "raven-js": "^3.21.0",
    "react": "^15.6.1",
    "react-dipper": "^0.1.3",
    "react-dom": "^15.6.1",
    "react-id-swiper": "^1.5.8",
    "react-iframe": "^1.1.0",
    "react-mixin": "^3.0.3",
    "react-redux": "^4.0.0",
    "react-refetch": "^1.0.0-beta.10",
    "react-router": "^2.6.0",
    "redux": "^3.0.4",
    "redux-thunk": "^1.0.0",
    "socket.io": "^2.0.4",
    "store": "^1.3.17",
    "underscore": "^1.8.3",
    "webpack-sentry-plugin": "^1.14.1",
    "whatwg-fetch": "^2.0.1"
  }
}

webpack.config.js是這樣的:

var path = require('path');
var fs = require('fs');
var webpack = require('webpack');
var ExtractTextWebapckPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var FastUglifyJsPlugin = require('fast-uglifyjs-plugin');
var SentryPlugin = require('webpack-sentry-plugin');
var LibManifestJson = require('./lib-manifest.json');
var sassExtract = new ExtractTextWebapckPlugin('css/sass.css');

const isDebug = process.env.NODE_ENV === 'debug';
const isProduct = isDebug || process.env.NODE_ENV === 'production';
var HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({ size: isProduct ? 3 : 1 });

let publicPath = '/';
if (fs.existsSync('./config.local.js')) {
  const consulConfig = require('./config.local');
  publicPath = `${consulConfig.cdn.static}/apollon/assets/`;
}

var entry = {
  app: ['whatwg-fetch', './src/scripts/index.js'],
};

if (!isProduct) {
  entry.app.push('webpack/hot/only-dev-server');
}

var config = {
  devtool: '#eval-source-map',
  mode: 'development',
  entry,
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath,
    filename: 'js/[name].js',
  },
  resolve: {
    modules: [
      path.resolve('./src/scripts'),
      path.resolve('./src'),
      'node_modules',
    ],
    extensions: ['*', '.js', '.scss', '.css', '.json'],
    alias: {
      containers: path.resolve(__dirname, './src/scripts/containers'),
      components: path.resolve(__dirname, './src/scripts/components'),
    },
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'happypack/loader?id=happybabel',
      },
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: 'json-loader',
      },
      {
        test: /\.css$/,
        use: ExtractTextWebapckPlugin.extract({
          use: 'css-loader'
        })
      },
      {
        test: /\.scss$/,
        use: sassExtract.extract({ use: ['css-loader', 'sass-loader'] })
      },
      {
        test: /\.(otf|eot|svg|ttf|woff2?)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]',
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 15000,
          name: 'images/[name].[hash:7].[ext]',
        },
      },
    ],
  },

  plugins: [
    new CopyWebpackPlugin([
      { from: 'src/images', to: 'images' },
    ]),
    new HappyPack({
      id: 'happybabel',
      loaders: ['babel-loader'],
      threadPool: happyThreadPool,
      verbose: true,
    }),
  ],
};

if (isProduct) {
  config.devtool = isDebug ? 'source-map' : '(none)';
  config.mode = 'production';
  config.output = Object.assign({}, config.output, {
    filename: 'js/[name].[chunkhash].js',
    chunkFilename: '[id].[chunkhash].js',
  });
  config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"',
      },
    }),
    new FastUglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true,
      },
      debug: true,
      workerNum: 1,
      sourceMap: isDebug,
    }),
    new ExtractTextWebapckPlugin({ filename: 'css/[name].[contenthash].css', allChunks: true }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: LibManifestJson,
    }),
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, './dist/index.html'),
      favicon: './src/images/favicon.ico',
      template: 'index.html',
      inject: 'body',
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
    }),
    new AddAssetHtmlPlugin({ filepath: require.resolve('./src/vendors/lib.dll.js'), includeSourcemap: false, hash: true, publicPath }),
    new SentryPlugin({
      organization: 'sentry',
      project: 'apollon-frontend',
      apiKey: 'ba56369e62fc4c22a71b3e8e8157cf86ab8b689cc7174aa68cf9b9c5f85d6b3f',
      // include: /\.js$/,
      include: /bundle-.*\.js.*/,
      release: process.env.COMMIT_ID,
      baseSentryURL: 'https://sentry.smartstudy.com/api/0',
    }),
  ]);
} else {
  var proxyHost = require('./src/scripts/common/config.js').webpackProxyHost;

  config.devServer = {
    contentBase: path.resolve(__dirname, './dist'),
    port: 3456,
    host: '0.0.0.0',
    hot: true,
    stats: {
      children: false,
    },
    disableHostCheck: true,
    historyApiFallback: true,
    noInfo: true,
    proxy: [
      {
        context: ['/api/**'],
        target: proxyHost,
        changeOrigin: true,
      },
    ],
  };

  config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
      },
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: LibManifestJson,
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new ExtractTextWebapckPlugin({ filename: 'css/[name].css', allChunks: true }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: path.resolve(__dirname, './src/images/favicon.ico'),
      inject: 'body',
    }),
    new AddAssetHtmlPlugin({ filepath: require.resolve('./src/vendors/lib.dll.js'), includeSourcemap: false, hash: true }),
  ]);
}

process.traceDeprecation = true;

module.exports = config;

請(qǐng)各位大佬幫忙查看一下可能的問(wèn)題,跪謝啦。。。

回答
編輯回答
離觴

webpack-dev-server后面有個(gè)逗號(hào),你的編輯器不報(bào)錯(cuò)嗎

2018年6月10日 10:37
編輯回答
貓小柒

解決了,是因?yàn)閖son-loader那里需要加上一句type: 'javascript/auto',

2017年4月26日 20:04