Webpack中的第三方Javascript和CSS文件。 奇怪的行为

Question

我正在使用MERN堆栈。 我不得不使用第三方html管理模板，它有很多标准的js和css文件（jquery，bootstrap，datatables等）。 为了将它与react集成，我在项目的根目录中创建了一个“public”文件夹。 然后我将Express配置为将此文件夹作为静态文件夹提供，并将所需的css和html文件放在此文件夹中。 为了使用它们，我在index.html文件的head部分添加了css，在body的末尾添加了js。 它在我在开发模式下运行服务器时没有问题。 当我在生产模式下运行它时，布局会以某种方式混乱。 如果我用CTRL + F5刷新它会得到修复，但是当我导航到新页面时它会再次被破坏，我必须再次按CTRL + F5才能正常显示。

这是我的webpack.config.dev.js

var webpack = require('webpack');
var cssnext = require('postcss-cssnext');
var postcssFocus = require('postcss-focus');
var postcssReporter = require('postcss-reporter');

module.exports = {
  devtool: 'cheap-module-eval-source-map',

  entry: {
    app: [
      'eventsource-polyfill',
      'webpack-hot-middleware/client',
      'webpack/hot/only-dev-server',
      'react-hot-loader/patch',
      './client/index.js',
    ],
    vendor: [
      'react',
      'react-dom',
    ],
  },

  output: {
    path: __dirname,
    filename: 'app.js',
    publicPath: 'http://0.0.0.0:8000/',
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    modules: [
      'client',
      'node_modules',
    ],
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
      }, {
        test: /\.css$/,
        include: /node_modules/,
        loaders: ['style-loader', 'css-loader'],
      }, {
        test: /\.jsx*$/,
        exclude: [/node_modules/, /.+\.config.js/],
        loader: 'babel',
      }, {
        test: /\.(jpe?g|gif|png|svg)$/i,
        loader: 'url-loader?limit=10000',
      }, {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
      filename: 'vendor.js',
    }),
    new webpack.DefinePlugin({
      'process.env': {
        CLIENT: JSON.stringify(true),
        'NODE_ENV': JSON.stringify('development'),
      }
    }),
  ],

  postcss: () => [
    postcssFocus(),
    cssnext({
      browsers: ['last 2 versions', 'IE > 10'],
    }),
    postcssReporter({
      clearMessages: true,
    }),
  ],
};

这是我的webpack.config.prod.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestPlugin = require('webpack-manifest-plugin');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
var cssnext = require('postcss-cssnext');
var postcssFocus = require('postcss-focus');
var postcssReporter = require('postcss-reporter');
var cssnano = require('cssnano');

module.exports = {
  devtool: 'hidden-source-map',

  entry: {
    app: [
      './client/index.js',
    ],
    vendor: [
      'react',
      'react-dom',
    ]
  },

  output: {
    path: __dirname + '/dist/client/',
    filename: '[name].[chunkhash].js',
    publicPath: '/',
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    modules: [
      'client',
      'node_modules',
    ],
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),
      }, {
        test: /\.css$/,
        include: /node_modules/,
        loaders: ['style-loader', 'css-loader'],
      }, {
        test: /\.jsx*$/,
        exclude: /node_modules/,
        loader: 'babel',
      }, {
        test: /\.(jpe?g|gif|png|svg)$/i,
        loader: 'url-loader?limit=10000',
      }, {
        test: /\.json$/,
        loader: 'json-loader',
      },
    ],
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
      filename: 'vendor.js',
    }),
    new ExtractTextPlugin('app.[chunkhash].css', { allChunks: true }),
    new ManifestPlugin({
      basePath: '/',
    }),
    new ChunkManifestPlugin({
      filename: "chunk-manifest.json",
      manifestVariable: "webpackManifest",
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      }
    }),
  ],

  postcss: () => [
    postcssFocus(),
    cssnext({
      browsers: ['last 2 versions', 'IE > 10'],
    }),
    cssnano({
      autoprefixer: false
    }),
    postcssReporter({
      clearMessages: true,
    }),
  ],
};

的package.json

{
  "name": "",
  "version": "2.0.0",
  "description": "",
  "scripts": {
    "test": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
    "watch:test": "npm run test -- --watch",
    "cover": "nyc npm run test",
    "check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
    "start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
    "start:prod": "cross-env NODE_ENV=production node index.js",
    "bs": "npm run clean && npm run build && npm run build:server && npm run start:prod",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
    "build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
    "clean": "rimraf dist",
    "slate": "rimraf node_modules && npm install",
    "lint": "eslint client server"
  },
  "pre-commit": [
    "lint",
    "test"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Hashnode/mern-starter.git"
  },
  "bugs": {
    "url": "https://github.com/Hashnode/mern-starter/issues"
  },
  "homepage": "https://github.com/Hashnode/mern-starter#readme",
  "author": "Prashant Abhishek <prashant.abhishek7g@gmail.com>, Mayank Chandola <imayankchd@gmail.com>, Sandeep Panda <sandeep@hashnode.com>, Syed Fazle Rahman <fazle@hashnode.com>, Alkshendra Maurya <alkshendra@hashnode.com>",
  "license": "MIT",
  "dependencies": {
    "babel-core": "^6.9.1",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.15.1",
    "compression": "^1.6.2",
    "cross-env": "^1.0.8",
    "cuid": "^1.3.8",
    "express": "^4.13.4",
    "intl": "^1.2.4",
    "intl-locales-supported": "^1.0.0",
    "isomorphic-fetch": "^2.2.1",
    "jsonwebtoken": "^8.2.1",
    "limax": "^1.3.0",
    "mongoose": "^4.4.20",
    "morgan": "^1.9.0",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "react": "^15.1.0",
    "react-contexify": "^3.0.0",
    "react-dom": "^15.1.0",
    "react-helmet": "^3.1.0",
    "react-intl": "^2.1.2",
    "react-notify-toast": "^0.4.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-router-dom": "^4.2.2",
    "react-toastify": "^4.0.1",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "sanitize-html": "^1.11.4"
  },
  "devDependencies": {
    "ava": "^0.15.2",
    "babel-eslint": "^6.0.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-webpack-loaders": "^0.7.0",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2015-native-modules": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "chai": "^3.5.0",
    "chunk-manifest-webpack-plugin": "0.1.0",
    "coveralls": "^2.11.9",
    "css-loader": "^0.23.1",
    "css-modules-require-hook": "^4.0.1",
    "cssnano": "^3.7.0",
    "enzyme": "^2.3.0",
    "eslint": "^2.11.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-ava": "^2.4.0",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.3.0",
    "eslint-plugin-react": "^5.1.1",
    "eventsource-polyfill": "^0.9.6",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jsdom": "^9.2.1",
    "json-loader": "^0.5.4",
    "mock-css-modules": "^1.0.0",
    "mockgoose": "^6.0.3",
    "nock": "^8.0.0",
    "nodemon": "^1.9.2",
    "null-loader": "^0.1.1",
    "nyc": "^6.4.4",
    "postcss-cssnext": "^2.6.0",
    "postcss-focus": "^1.0.0",
    "postcss-loader": "^0.9.1",
    "postcss-reporter": "^1.3.3",
    "pre-commit": "^1.1.3",
    "react-addons-test-utils": "^15.1.0",
    "react-hot-loader": "^3.0.0-beta.2",
    "redux-ava": "^2.0.0",
    "redux-devtools": "^3.3.1",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.0.11",
    "rimraf": "^2.5.2",
    "script-loader": "^0.7.2",
    "sinon": "^1.17.4",
    "style-loader": "^0.13.1",
    "supertest": "^1.2.0",
    "url-loader": "^0.5.7",
    "webpack": "2.1.0-beta.8",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^2.1.0-beta.0",
    "webpack-externals-plugin": "^1.0.0",
    "webpack-hot-middleware": "^2.10.0",
    "webpack-manifest-plugin": "^1.0.1"
  },
  "engines": {
    "node": ">=4"
  },
  "ava": {
    "files": [
      "client/**/*.spec.js",
      "server/**/*.spec.js"
    ],
    "source": [
      "client/**/*.js",
      "server/**/*.js"
    ],
    "failFast": true,
    "babel": "inherit",
    "require": [
      "./server/util/setup-test-env.js"
    ]
  },
  "nyc": {
    "include": [
      "client/**/*.js",
      "server/**/*.js"
    ],
    "exclude": [
      "**/*.spec.js",
      "client/reducers.js",
      "client/store.js",
      "client/routes.js",
      "server/util/setup-test-env.js",
      "server/util/test-helpers.js",
      "server/config.js",
      "server/dummyData.js"
    ],
    "reporter": [
      "lcov",
      "text",
      "html"
    ]
  }
}

这可以修复吗？

编辑：即使没有CTRL + F5刷新，似乎页面有时正确加载。 我的直觉告诉我问题在于JS文件的加载顺序。 关于如何在开发和生产中保持加载顺序相同的任何提示？

Answer 1

在webpack.config.prod.js的情况下如果你看到这部分代码

loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),    42.         loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',}

只需删除ExtractTextPlugin.extract并将此部分代码修改为

'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader'