Comments (6)
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.
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.
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.
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.
Can you post the working bundle.js
(output
) please
from script-loader.
/******/ (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)
- Scripts not being executed HOT 1
- Cannot use the script with Internet Explorer 11 HOT 13
- Can't find module lib.js HOT 1
- Using sourceMaps with script-loader HOT 8
- CSP does not allow eval HOT 11
- Compatibility with Babel HOT 1
- [Script Loader] import declarations may only appear at top level of a module HOT 1
- Document this Loader - Provide a full blown working example HOT 2
- when the js file need jquery ,it throw jquery not define error HOT 1
- Error: require is not defined HOT 2
- What does global context mean? HOT 3
- [Karma] Bundled file works in browser but can't be loaded in Karma HOT 1
- Using script-loader seems to lead to a different `[chunkhash]` being generated each time HOT 6
- Order of operations HOT 2
- Error in IE 11 HOT 2
- Stable hashes HOT 3
- Update version after code change HOT 6
- "require is not defined" when using with babel-loader HOT 1
- Reference error when used with webpack-dev-server
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from script-loader.