logo标签列表

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

javascripthtmlcssreactjswebpack
5
我正在使用MERN技术栈。我需要使用第三方的html管理模板，它包含了大量标准的js和css文件（例如jquery、bootstrap、datatables等）。为了将其与React集成，我在项目的根目录中创建了一个名为“public”的文件夹。然后，我配置了Express将该文件夹作为静态文件进行服务，并将所需的css和html文件放置在该文件夹中。为了使用它们，我将css添加到index.html文件的head部分，将js添加到body的结尾处。在开发模式下运行服务器时，一切正常，没有问题。但是，在生产模式下运行时，布局会出现问题。如果我使用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文件的加载顺序。有什么建议可以在开发和生产环境中保持加载顺序相同吗？

你在无痕模式下试过了吗？ - Tamas Szoke
@TamasSzoke 是的，同样的情况。当我使用CTRL + F5刷新时，它可以正常加载。否则，布局会出现问题。 - Arlind
你有现成的实例吗？ - Thiago Loddi
@ThiagoLoddi 我有一个实时的例子，但我已经在开发模式下运行了服务器。我可以私下向您展示它。您需要从实时示例中获取什么样的信息？我可以运行它并发送您所需的内容。 - Arlind
你能否发布你的 package.json 文件以查看你正在使用的库版本？ - jpdelatorre
检查和调试当您从一个页面到另一个页面移动时哪些代码未加载，然后检查它们具有哪些触发器。我们曾经遇到过类似的问题，正在处理此问题的人使用了“文档准备就绪”之类的触发器，但随后某些库在从一个内部页面切换到另一个页面时执行了prevent default操作。 - JoelBonetR
1个回答
0

在 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'
相同的行为。我几乎可以确定问题出在JS文件上，而不是CSS文件上。 - Arlind
是的，我有。没有修好。请检查原来的问题，我已经编辑过了。 - Arlind
如果你想要保持脚本加载的顺序，可以使用head.js（http://headjs.com/）。 - this_is_om_vm
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接