Giter VIP home page Giter VIP logo

Comments (6)

michael-ciniawsky avatar michael-ciniawsky commented on May 30, 2024 3

module.exports = "// import /* <= Error */ '../folder_a/a.js';\r\n// import '../folder_a/aa.js';\r\n// import '../folder_b/b.js';"

The problem is that webpack also applies script-loader to './javascript/src/mybundle.js' (entry), bc of test: /\.js$/ and skips the rest. You need to rename the files file.(exec|script|script).js or maybe exclude works

{
   test: /\.exec\.js$/,
   use: [ 'script-loader' ]
}
// No guarantee
{
   test: /\.js$/,
   use: [ 'script-loader' ],
   exclude: /mybundle\.js$/
}

from script-loader.

michael-ciniawsky avatar michael-ciniawsky commented on May 30, 2024 1

When you use the this loader e.g test: /\.exec\.js$/ => import './somefile.exec.js', only this file/import will use script-loader then

from script-loader.

michael-ciniawsky avatar michael-ciniawsky commented on May 30, 2024

Can you show your full config and give context about your setup please ? Currently all .js files will match and be executed by script-loader. The intend of this loader is to execute certain files once in global context

from script-loader.

oldie85 avatar oldie85 commented on May 30, 2024

I'm working on a site that has lots of legacy JS and they currently use a redundant technology to minify and concatenate.

I decided to use webpack and specifically script-loader as this seemed to do what I need. As I've mentioned before if I inline 'script-loader', it works.

As soon as I attempt to add it to the webpack config I get the 'unexpected token import' error.

I have a bundle file /javascript/src/mybundle.js

mybundle.js

 import '../folder_a/a.js';
 import '../folder_a/aa.js';
 import '../folder_b/b.js';

webpack.config.js

const webpack = require('webpack');

const distPath = 'javascript/dist/';

module.exports = {
	entry: {
		[distPath + 'mybundle'] : './javascript/src/mybundle.js'
	},
	output: {
		filename: '[name].build.js',
		path: path.resolve(__dirname)
	},
	plugins: [
		new webpack.LoaderOptionsPlugin({
			debug: true
		})
	],
	module: {
	    rules: [
	      {
	        test: /\.js$/,
	        use: [ 'script-loader' ]
	      }
	    ]
	  }
};

package.json

  "name": "javascript",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "script-loader": "0.7.2",
    "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
    "webpack": "^3.6.0",
    "webpack-merge": "4.1.0"
  }
}

from script-loader.

michael-ciniawsky avatar michael-ciniawsky commented on May 30, 2024

Can you post the working bundle.js (output) please

from script-loader.

oldie85 avatar oldie85 commented on May 30, 2024
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(1)(__webpack_require__(2)+"\n\n// SCRIPT-LOADER FOOTER\n//# sourceURL=script:///path/to/javascript/src/mybundle.js")

/***/ }),
/* 1 */
/***/ (function(module, exports) {

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/
module.exports = function(src) {
	function log(error) {
		(typeof console !== "undefined")
		&& (console.error || console.log)("[Script Loader]", error);
	}

	// Check for IE =< 8
	function isIE() {
		return typeof attachEvent !== "undefined" && typeof addEventListener === "undefined";
	}

	try {
		if (typeof execScript !== "undefined" && isIE()) {
			execScript(src);
		} else if (typeof eval !== "undefined") {
			eval.call(null, src);
		} else {
			log("EvalError: No eval function available");
		}
	} catch (error) {
		log(error);
	}
}


/***/ }),
/* 2 */
/***/ (function(module, exports) {

module.exports = "// import '../folder_a/a.js';\r\n// import '../folder_a/aa.js';\r\n// import '../folder_b/b.js';"

/***/ })
/******/ ]);

from script-loader.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.