如何在4个文件上禁用AMD并使用webpack依次加载它们 [英] How to disable AMD on 4 files and load them in order with webpack

问题描述

我需要在4个文件上禁用AMD并先加载video.js，然后再加载其他3个文件，因为它们依赖于它.当我尝试像这样在webpack.config.js中进行操作时:

I need to disable AMD on 4 files and load video.js first before loading the other 3 files, because they depend on it. When I tried doing it in webpack.config.js like so:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    contentBase: './src',
    port: 3333
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules|lib/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react', 'stage-2'],
          plugins: ['transform-class-properties']
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /[\/\\]lib[\/\\](video|playlist|vpaid|overlay)\.js$/,
        exclude: /node_modules|src/
        loader: 'imports?define=>false'
      }
    ]
  }
}

它并没有真正起作用，因为它只是加载了video.js(在禁用了AMD的情况下)，并且完全忽略了其他3个文件.

It doesn't really work, because it just loads video.js (with disabled AMD) and completely ignores the other 3 files.

我的文件夹结构如下:

▾ lib/
    overlay.js
    playlist.js
    video.js
    vpaid.js
▸ node_modules/
▾ public/
    200.html
    bundle.js
▾ src/
    App.js
    index.html
    main.js
  LICENSE
  package.json
  README.md
  webpack.config.js

现在，我发现有些问题使我退后了一步，因为现在即使video.js都无法加载:

Now, I found something that takes me 1 step back, because now even video.js doesn't load:

require('imports?define=>false!../lib/video.js')
require('imports?define=>false!../lib/playlist.js')
require('imports?define=>false!../lib/vpaid.js')
require('imports?define=>false!../lib/overlay.js')

而是抛出这些警告:

WARNING in ./~/imports-loader?define=>false!./lib/video.js
Critical dependencies:
15:415-422 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/imports-loader?define=>false!./lib/video.js 15:415-422

WARNING in ./~/imports-loader?define=>false!./lib/playlist.js
Critical dependencies:
10:417-424 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/imports-loader?define=>false!./lib/playlist.js 10:417-424

WARNING in ./~/imports-loader?define=>false!./lib/vpaid.js
Critical dependencies:
4:113-120 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/imports-loader?define=>false!./lib/vpaid.js 4:113-120

WARNING in ./~/imports-loader?define=>false!./lib/overlay.js
Critical dependencies:
10:416-423 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/imports-loader?define=>false!./lib/overlay.js 10:416-423

所以，我的问题是，如何在webpack.config.js中进行此项工作，以免收到这些警告?

So, my question is, how can I make this work in webpack.config.js so that I don't get these warnings?

推荐答案

我已经解决了这个问题！要完成这项工作，您需要这样做:

I have solved the problem! To make this work you need this:

 {
    test: /[\/\\]lib[\/\\](video|playlist|vpaid|overlay)\.js$/,
    exclude: /node_modules|src/
    loader: 'imports?define=>false'
  }

还有这个

require('script-loader!../lib/video.js')
require('script-loader!../lib/playlist.js')
require('script-loader!../lib/vpaid.js')
require('script-loader!../lib/overlay.js')

一起！

现在，如果您使用此代码(而不是脚本加载器):

Now, if you use this (instead of script-loader):

require('imports?define=>false!../lib/video.js')
require('imports?define=>false!../lib/playlist.js')
require('imports?define=>false!../lib/vpaid.js')
require('imports?define=>false!../lib/overlay.js')

这行不通！ (您需要同时使用imports-loader和script-loader.

It's not gonna work! (you need both imports-loader and script-loader working in unison.

这篇关于如何在4个文件上禁用AMD并使用webpack依次加载它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！