7286

How to disable AMD on 4 files and load them in order with webpack

Question:

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?

Answer1:

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.

Recommend

  • Webpack + Angular2 wrong publicPath?
  • Webpack: Loading images from html templates
  • how to find out the current NODE_ENV the express app is running under?
  • How to use babel-preset-env with Jest
  • Webpack Error while including bootstrap 3
  • When deploying an app to Bluemix using the sdk-for-nodejs buildpack, it's running npm install w
  • CORS issue with Twitter api calls in Webpack dev server
  • Webpack 2 loading, exposing, and bundling jquery and bootstrap
  • How to use an anonymous class instance in another generate bytecode class
  • Angular2-mdl and webpack
  • Use Babel with JavaScript
  • Google script gmail addon update TextInput value,on change function
  • toString() for each element of an array in Javascript [duplicate]
  • MongoError: getaddrinfo ENOTFOUND undefined undefined:27017
  • JavaScript - Can we set javascript objects in cookies?
  • Function insertMany() unordered: proper way to get both the errors and the result?
  • How can I selectively modify the src attributes of script tags in an HTML document using Perl?
  • Rails 4.1 environment variables not reloading
  • How to create a custom Powershell operator?
  • CORS with socket.io
  • What is the use of a session store?
  • Using Laravel 5.4 pusher
  • Getting media player state in windows phone 7
  • Prevent Tomcat from caching request during starup
  • Access Android Market through SSH tunnel
  • How can I sort a a table with VBA with given text condition?
  • How to run “Deployd” on port 80 instead of port 5000 in webserver.
  • Play WS (2.2.1): post/put large request
  • Different response to non-authenticated users and AJAX calls
  • How to get a value (ex: baseURL) in every Karate feature?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Understanding cpu registers
  • How do I configure my settings file to work with unit tests?
  • Is it possible to post an object from jquery to bottle.py?
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • How do I use LINQ to get all the Items that have a particular SubItem?