Webpack 打字稿在没有 webpackJsonp 的情况下编译 [英] Webpack typescript compile without webpackJsonp
问题描述
是否可以使用 webpack 进行打包而不使用 webpack 模块加载?
Is it possible to use webpack for packing without using webpack module loading?
我有一个应用程序可以使用 webpack 的所有内容，在这个应用程序旁边我有一个小的打字稿文件 test.ts 应该编译、缩小等.但输出应该是一个简单的js 文件没有被包裹在 webpackJsonp 中.对于没有外部依赖的几行来说，是增加了太多的开销(96kb).
I have an app that can use everything of webpack and next to this app I have a small typescript file test.ts that should be compiled, minified, etc. But the output should be a simple js file that is not wrapped into webpackJsonp. Is is adding wayyyy too much overhead (96kb) for just a few lines that have no external dependency.
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) 来构建.
I try to keep one ecosystem (webpack) to build.
推荐答案
这不是 webpack 的开销.这种开销是由另一个原因造成的.这里演示 webpack 配置.webpack 为带有内容 alert() 的源构建包，结果大小仅为 519 字节，而不是所声明的 96kb.项目内容和结果包(缩小和非缩小)是:
It is not webpack overhead. This overhead caused by another reason. Here demonstration webpack configuration. The webpack build the bundle for source with content alert() with result size only 519 bytes instead of 96kb declared in question. The project content and result bundles (minified and non minified) are:
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 - 生成的最小化
!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);
/***/ })
/******/ });
这篇关于Webpack 打字稿在没有 webpackJsonp 的情况下编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
