Question

在webpack开发服务器中使用动态导入（ES6样式）时，它可以工作-导入正在使用块动态化。

但是，在其他开发服务器上运行时，相同的代码不起作用（例如，将生成的index.html文件拖到浏览器中）。

这是我的webpack配置文件：

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');


const path = require('path');

function resolvePath(dir) {
  return path.join(__dirname, '..', dir);
}

const env = process.env.NODE_ENV || 'development';
const target = process.env.TARGET || 'web';
const isCordova =  target === 'cordova';

module.exports = {
  mode: env,
  entry: [
    'babel-polyfill',
    './src/webpack.entry.js',
  ],
  output: {
    path: resolvePath(isCordova ? 'cordova/www' : 'www'),
    filename: 'app/app.js',
    publicPath: '/',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      '@': resolvePath('src'),
      '@app': resolvePath('src/app'),
      '@locales': resolvePath('src/app/locales'),
      '@properties': resolvePath('src/app/properties'),
      '@services': resolvePath('src/app/services'),
      '@helpers': resolvePath('src/app/services/helpers'),
      '@pages': resolvePath('src/pages'),
      "@shared": resolvePath('src/shared'),
      "@forms": resolvePath('src/shared/forms'),
      "@structure": resolvePath('src/structure'),
      "@assets": resolvePath('src/assets'),
    },
  },
  devtool: env === 'production' ? 'source-map' : 'eval-source-map',
  devServer: {
    hot: true,
    open: true,
    compress: true,
    contentBase: '/www/',
    disableHostCheck: true,
    watchOptions: {
      poll: true,
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        include: [
          resolvePath('src'),
          resolvePath('node_modules/framework7'),
          resolvePath('node_modules/framework7-react'),
          resolvePath('node_modules/template7'),
          resolvePath('node_modules/dom7'),
          resolvePath('node_modules/ssr-window'),
        ],
      },


      {
        test: /\.css$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.styl(us)?$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'stylus-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(sa|sc)ss$/,
        use: [
          (env === 'development' ? 'style-loader' : {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }),
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'images/[name].[ext]',
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[ext]',
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]',
        },
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env),
      'process.env.TARGET': JSON.stringify(target),
    }),

    ...(env === 'production' ? [
      // Production only plugins
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
          },
        },
        sourceMap: true,
        parallel: true,
      }),
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true,
          map: { inline: false },
        },
      }),
      new webpack.optimize.ModuleConcatenationPlugin(),
    ] : [
      // Development only plugins
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
    ]),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './src/index.html',
      inject: true,
      minify: env === 'production' ? {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      } : false,
    }),
    new MiniCssExtractPlugin({
      filename: 'app/app.css',
    }),
    new CopyWebpackPlugin([
      {
        from: resolvePath('src/static'),
        to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
      },

    ]),


  ],
};

这是我的圣经配置文件：

module.exports = {
  presets: [
    '@babel/preset-react',
    ['@babel/preset-env', {
      modules: false,
      targets: {
        browsers: [
          'Android >= 5',
          'IOS >= 9.3',
          'Edge >= 15',
          'Safari >= 9.1',
          'Chrome >= 49',
          'Firefox >= 31',
          'Samsung >= 5',
        ],
      },
    }]
  ],
  plugins: [
    // "@babel/plugin-transform-runtime",
    "react-hot-loader/babel",
    '@babel/plugin-syntax-dynamic-import',
  ],
};

这是我的输入文件：

// Import React and ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';

// Import Framework7
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Import Framework7-React Plugin
import Framework7React from 'framework7-react';

// Import App Component
import App from '@app/app-class';

// Icons
import '@assets/css/icons.css';

// RootScope 
import RootScope from '@properties/rootScope';

// Init F7 React Plugin
Framework7.use(Framework7React);

RootScope.language = window.localStorage.getItem("language") || navigator.language;
if (RootScope.language!="he-IL" && RootScope.language!="en-US") RootScope.language = "he-IL";
localStorage.setItem("language", RootScope.language);

if (RootScope.language=="he-IL") {
  import('framework7/css/framework7.bundle.rtl.css').then(() => {
    import('@locales/he-IL/translations.json').then(module => {
      import('@app/app.scss').then(() => {
        RootScope.t = module.default;
        initReactApp();
      })
    })
  })
}
if (RootScope.language=="en-US") {
  import('framework7/css/framework7.bundle.css').then(() => {
    import('@locales/en-US/translations.json').then(module => {
      import('@app/app.scss').then(() => {
        RootScope.t = module.default;
        initReactApp();
      })
    })
  })
}

function initReactApp() {

  // Mount React App
  ReactDOM.render(
    React.createElement(App),
    document.getElementById('app'),
  );

}

if (process.env.TARGET!="cordova" && process.env.NODE_ENV=="development") {
  module.hot.accept();
}

如您所见，以上代码在浏览器的webpack devserver上运行时有效，并且每个动态导入均有效。但是，当这样做并在浏览器中而不是通过webpack开发服务器运行它时，它不会返回错误，即找不到块模块。

那是错误：

GET http://localhost:8000/app/2.app.js net::ERR_ABORTED 404 (Not Found)
requireEnsure @ app.js:829
fn.e @ app.js:156
(anonymous) @ webpack.entry.js?9eb6:30
(anonymous) @ webpack.entry.js:90
./src/webpack.entry.js @ app.js:11230
__webpack_require__ @ app.js:767
fn @ app.js:130
0 @ app.js:11242
__webpack_require__ @ app.js:767
(anonymous) @ app.js:902
(anonymous) @ app.js:905
app.js:817 Uncaught (in promise) Error: Loading chunk 2 failed.
(error: http://localhost:8000/app/2.app.js)
    at HTMLScriptElement.onScriptComplete (app.js:817)

Webpack + Babel动态导入在Cordova上不起作用

0 个答案: