沒有webpackJsonp的Webpack打字稿編譯

是否可以使用webpack打包而不使用webpack模塊加載？沒有webpackJsonp的Webpack打字稿編譯

我有一個應用程序，可以使用的WebPack的一切，旁邊的這個程序我有一個小的打字稿文件test.ts應當編制，精縮等，但輸出應該是不裹成webpackJsonp一個簡單的js文件。對於只有幾行沒有外部依賴性的行來說，添加wayyyy的開銷太大（96kb）。

test.ts

alert('foo');

test.js是

webpackJsonp([1],{ 
/***/ 0: 
/***/ function(module, exports, __webpack_require__) { 

    __webpack_require__(1); 
    __webpack_require__(75); 
    module.exports = __webpack_require__(105); 

/***/ }, 

/***/ 105: 
/***/ function(module, exports) { 

    "use strict"; 
    alert('test'); 

/***/ } 
});

test.js應該

alert('foo');

我嘗試保持一個生態系統（webpack）的構建。

來源

2016-11-14 Sven-Michael Stübe

你能向我們提供您的WebPack配置？看起來可能有些東西會導致你看到大量的開銷。 – Ambroos

您是否找到答案？我開了一個獎金，因爲我的問題完全一樣。 – dccarmo

它不是webpack開銷。這是由另一個原因造成的開銷。在這裏演示webpack配置。 webpack構建內容爲alert()的源代碼包，結果大小僅爲519字節，而不是96KB。項目內容和結果束（精縮和非縮小的）是：

的package.json

{ 
    "name": "app", 
    "version": "1.0.0", 
    "main": "webapp.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-preset-react": "^6.3.13", 
    "express": "^4.15.3", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "ts-loader": "^2.1.0", 
    "typescript": "^2.3.3", 
    "webpack": "^2.5.1" 
    }, 
    "description": "" 
}

tsconfig.json

{ 
    "compilerOptions": { 
    "outDir": "./public/", 
    "sourceMap": true, 
    "noImplicitAny": true, 
    "module": "commonjs", 
    "target": "es5", 
    "jsx": "react", 
    "allowJs": true 
    } 
}

alert.ts

alert(1);

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Hello Workd!</title> 
    </head> 
    <body> 
     <div id="root"></div> 
     <script type="text/javascript" src="alert.js"></script> 
    </body> 
</html>

webpack.config.js

var webpack = require('webpack'); 
var path = require('path'); 
module.exports = { 
    entry: { 
    App: './App', 
    alert: './alert.ts', 
    }, 
    output: { 
    path: path.join(__dirname, './public'), 
    filename: '[name].js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.tsx?$/, 
     loader: 'ts-loader', 
     exclude: /node_modules/, 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.UglifyJsPlugin() 
    ] 
}

alert.js - 生成mininied

!function(n){function r(e){if(t[e])return t[e].exports;var o=t[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=n,r.c=t,r.i=function(n){return n},r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=182)}({182:function(n,r){alert(1)}});

alert.js - 產生的非精縮

/******/ (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; 
/******/ 
/******/ // identity function for calling harmony imports with the correct context 
/******/ __webpack_require__.i = function(value) { return value; }; 
/******/ 
/******/ // 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 = 182); 
/******/ }) 
/************************************************************************/ 
/******/ ({ 

/***/ 182: 
/***/ (function(module, exports) { 

alert(1); 


/***/ }) 

/******/ });

來源

2017-05-29 05:37:12 oklas

沒有webpackJsonp的Webpack打字稿編譯

回答

相關問題