如何在4个文件上禁用AMD并使用webpack按顺序加载它们(How to disable AMD on 4 files and load them in order with webpack)

如何在4个文件上禁用AMD并使用webpack按顺序加载它们(How to disable AMD on 4 files and load them in order with webpack)

我需要在4个文件上禁用AMD并在加载其他3个文件之前先加载video.js ，因为它们依赖于它。 当我尝试在webpack.config.js中这样做时：

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个文件。

我的文件夹结构是这样的：

▾ 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都没有加载：

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这项工作，以便我不会收到这些警告？

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' } ] } }

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

My folder structure is like so:

▾ 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

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')

and instead just throws these kinds of warnings:

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

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

最满意答案

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

{ 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')

一起！

现在，如果你使用它（而不是脚本加载器）：

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')

它不会起作用！ （你需要import-loader和script-loader同时工作。

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' }

and this

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

together!

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')

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