Internet Explorer 11和Webpack V3-不捆绑CSS变量

时间:2019-06-02 15:02:18

标签: css internet-explorer webpack react-toolbox

我正在与Webpack捆绑在一起的React \ Redux项目。

将webpack V1升级到V3后,对IE(11)的支持被破坏,某些元素具有附加的CSS规则,而IE无法处理它。
在谷歌浏览器上,一切正常。

Broken CSS rules

enter image description here

package.json

{
  "name": "react-tutorials",
  "version": "0.0.0",
  "description": "Javelin UI",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "base64-js": "^1.3.0",
    "body-parser": "1.15.0",
    "classnames": "2.2.3",
    "copy-to-clipboard": "^3.0.8",
    "core-js": "^2.6.9",
    "cryptr": "^4.0.2",
    "dateformat": "^1.0.12",
    "es6-promise": "^3.1.2",
    "es6-shim": "0.35.0",
    "file-saver": "^1.3.8",
    "flux": "^2.1.1",
    "griddle-react": "^0.8.2",
    "history": "^1.17.0",
    "lodash": "^4.17.11",
    "material-ui": "^0.17.4",
    "minify": "^4.1.1",
    "moment": "^2.24.0",
    "react": "^15.6.2",
    "react-bootstrap": "^0.32.0",
    "react-collapsible": "^1.5.0",
    "react-datepicker": "^0.57.0",
    "react-dom": "^15.6.2",
    "react-easy-transition": "^1.2.6",
    "react-fontawesome": "^1.6.1",
    "react-keydown": "1.4.9",
    "react-list": "^0.8.8",
    "react-redux": "^4.4.10",
    "react-router": "^3.2.0",
    "react-router-redux": "^4.0.4",
    "react-s-alert": "^1.4.1",
    "react-tagsinput": "^3.19.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-timeago": "^3.1.0",
    "react-toggle-button": "^2.1.0",
    "react-toolbox": "^2.0.0-beta.13",
    "react-tooltip": "^3.10.0",
    "redux": "^3.7.2",
    "redux-create-reducer": "1.1.0",
    "reselect": "2.3.0",
    "seamless-immutable": "^6.0.0",
    "socket.io-client": "^2.2.0",
    "string-replace-webpack-plugin": "0.0.4",
    "subnet-info": "0.0.2",
    "universal-cookie": "^2.1.2",
    "webpack-replace": "^1.0.0",
    "whatwg-fetch": "^0.11.0"
  },
  "devDependencies": {
    "babel-loader": "^6.4.1",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "6.5.0",
    "css-loader": "^0.28.11",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^0.8.1",
    "sass-loader": "^3.1.2",
    "string-replace-loader": "^1.3.0",
    "style-loader": "^0.13.2",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^1.16.5"
  },
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server --lazy --progress",
    "hot": "node_modules/.bin/webpack-dev-server --hot --progress",
    "mockServer": "cd mockserver && nodemon server.js",
    "build": "set NODE_ENV=production&& webpack --progress --colors --define process.env.NODE_ENV='\"production\"'",
    "test": "NODE_ENV=test node_modules/.bin/karma start",
    "cov": "open coverage/report-html/index.html"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js:

var debug      = process.env.NODE_ENV !== 'production';
var webpack    = require('webpack');
var path       = require('path');
const srcPath  = path.join(__dirname, "src");
const jsPath   = path.join(srcPath, "js");
const cssPath  = path.join(srcPath, "css");
const testPath = path.join(__dirname, 'spec');
const distPath = path.join(__dirname, 'dist');
autoprefixer   = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const appEnv   = process.env.NODE_ENV || 'development';

//getting the commit sha and sending it UI
var childProcess = require('child_process');
const VERSION = childProcess.execSync('git rev-parse HEAD').toString().replace(/(\r\n|\n|\r)/gm,"");

const plugins = [
  new webpack.DefinePlugin({ $_ENVIRONMENT: JSON.stringify(appEnv) })
];
const devPlugins = [];
const prodPlugins = [
  new UglifyJsPlugin({uglifyOptions: { mangle: false, sourceMap: false }})
];

module.exports = {
  context: srcPath,
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/client.js",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react', 'es2015', 'stage-0', 'stage-1'],
              plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
            }
          }
        ],
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true, // default is false
              sourceMap: true,
              importLoaders: 1,
              import: true,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          'sass-loader',
          "postcss-loader"
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader?root=' + encodeURIComponent(cssPath) + '&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5],'
          },
          {
            loader: 'sass-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      // Allow `require`ing image/font files (also when included in CSS)
      // Inline assets under 5kb as Base64 data URI, otherwise uses `file-loader`
      {
        test: /\.(eot|woff2?|ttf|otf)(\?.*)?$/i,
        use: 'url-loader?limit=5120&name=[path][name].[hash].[ext]'
      },

      {
        test: /\.(jpe?g)(\?.*)?$/i,
        use: 'url-loader?limit=5120&name=[path][name].[hash].[ext]'
      },
      {
        test: /\.(svg|gif|png)$/i,
        use: 'url-loader',
      }
    ]
  },
  output: {
    path: distPath,
    publicPath: '/',
    filename: "client.min.js"
  },
  resolve: {
    modules: ['node_modules',jsPath, cssPath, testPath],
    extensions: ['*', '.js', '.jsx', '.json', '.scss'],
  },
  plugins: plugins.concat(debug ? devPlugins : prodPlugins),
  devServer: {
    contentBase: srcPath,
    colors: true,
    noInfo: false,
    inline: true,
    historyApiFallback: true
  }
};

1 个答案:

答案 0 :(得分:0)

通过更新和添加一些节点程序包来解决。

package.json

  {
  "name": "react-tutorials",
  "version": "0.0.0",
  "description": "Javelin UI",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "base64-js": "^1.3.0",
    "body-parser": "1.15.0",
    "classnames": "2.2.3",
    "copy-to-clipboard": "^3.0.8",
    "core-js": "^2.6.9",
    "cryptr": "^4.0.2",
    "dateformat": "^1.0.12",
    "es6-promise": "^3.1.2",
    "es6-shim": "0.35.0",
    "file-saver": "^1.3.8",
    "flux": "^2.1.1",
    "griddle-react": "^0.8.2",
    "history": "^1.17.0",
    "lodash": "^4.17.11",
    "material-ui": "^0.17.4",
    "minify": "^4.1.1",
    "moment": "^2.24.0",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.6.0",
    "react": "^15.6.2",
    "react-app-polyfill": "^1.0.1",
    "react-bootstrap": "^0.32.0",
    "react-collapsible": "^1.5.0",
    "react-datepicker": "^0.57.0",
    "react-dom": "^15.6.2",
    "react-easy-transition": "^1.2.6",
    "react-fontawesome": "^1.6.1",
    "react-keydown": "1.4.9",
    "react-list": "^0.8.8",
    "react-redux": "^4.4.10",
    "react-router": "^3.2.0",
    "react-router-redux": "^4.0.4",
    "react-s-alert": "^1.4.1",
    "react-tagsinput": "^3.19.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-timeago": "^3.1.0",
    "react-toggle-button": "^2.1.0",
    "react-toolbox": "^2.0.0-beta.13",
    "react-tooltip": "^3.10.0",
    "redux": "^3.7.2",
    "redux-create-reducer": "1.1.0",
    "reselect": "2.3.0",
    "seamless-immutable": "^6.0.0",
    "socket.io-client": "^2.2.0",
    "string-replace-webpack-plugin": "0.0.4",
    "subnet-info": "0.0.2",
    "sugarss": "^2.0.0",
    "universal-cookie": "^2.1.2",
    "webpack-replace": "^1.0.0",
    "whatwg-fetch": "^0.11.0"
  },
  "devDependencies": {
    "babel-loader": "^6.4.1",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.1.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "6.5.0",
    "css-loader": "^0.28.11",
    "cssnano": "^4.1.10",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^3.1.2",
    "string-replace-loader": "^1.3.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^1.16.5"
  },
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server --lazy --progress",
    "hot": "node_modules/.bin/webpack-dev-server --hot --progress",
    "mockServer": "cd mockserver && nodemon server.js",
    "build": "set NODE_ENV=production&& webpack --progress --colors --define process.env.NODE_ENV='\"production\"'",
    "test": "NODE_ENV=test node_modules/.bin/karma start",
    "cov": "open coverage/report-html/index.html"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

var debug      = process.env.NODE_ENV !== 'production';
var webpack    = require('webpack');
var path       = require('path');
const srcPath  = path.join(__dirname, "src");
const jsPath   = path.join(srcPath, "js");
const cssPath  = path.join(srcPath, "css");
const testPath = path.join(__dirname, 'spec');
const distPath = path.join(__dirname, 'dist');
autoprefixer   = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const appEnv   = process.env.NODE_ENV || 'development';

//getting the commit sha and sending it UI
var childProcess = require('child_process');
const VERSION = childProcess.execSync('git rev-parse HEAD').toString().replace(/(\r\n|\n|\r)/gm,"");

const plugins = [
  new webpack.DefinePlugin({ $_ENVIRONMENT: JSON.stringify(appEnv) })
];
const devPlugins = [];
const prodPlugins = [
  new UglifyJsPlugin({uglifyOptions: { mangle: false, sourceMap: false }})
];

module.exports = {
  context: srcPath,
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/client.js",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react', 'es2015', 'stage-0', 'stage-1'],
              plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
            }
          }
        ],
      },
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'string-replace-loader',
            options: {
              search: 'COMMIT_SHA_ANCHOR',
              replace: VERSION
            }
          }
        ],
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true, // default is false
              sourceMap: true,
              importLoaders: 1,
              import: true,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          'sass-loader',
          "postcss-loader"
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader?root=' + encodeURIComponent(cssPath) + '&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5],'
          },
          {
            loader: 'sass-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
      },
      // Allow `require`ing image/font files (also when included in CSS)
      // Inline assets under 5kb as Base64 data URI, otherwise uses `file-loader`
      {
        test: /\.(eot|woff2?|ttf|otf)(\?.*)?$/i,
        use: 'url-loader?limit=5120&name=[path][name].[hash].[ext]'
      },

      {
        test: /\.(jpe?g)(\?.*)?$/i,
        use: 'url-loader?limit=5120&name=[path][name].[hash].[ext]'
      },
      {
        test: /\.(svg|gif|png)$/i,
        use: 'url-loader',
      }
    ]
  },
  output: {
    path: distPath,
    publicPath: '/',
    filename: "client.min.js"
  },
  resolve: {
    modules: ['node_modules',jsPath, cssPath, testPath],
    extensions: ['*', '.js', '.jsx', '.json', '.scss'],
  },
  plugins: plugins.concat(debug ? devPlugins : prodPlugins),
  devServer: {
    contentBase: srcPath,
    colors: true,
    noInfo: false,
    inline: true,
    historyApiFallback: true
  }
};

还添加:
.babelrc

  {
  "presets": [
    ["env", {
      "modules": 'commonjs',
      "targets": {
        "browsers": [
          "> 1%",
          "Firefox >= 52", // last ESR
          "IE 11"
        ]
      },
      "useBuiltIns": true
    }]
  ]
}

postcss.config.js

module.exports = {
  plugins: {
    'postcss-preset-env': {},
    'cssnano': {}
  }
}

请禁止IE非法...