Webpack method to package non-modular js

This article mainly records how to use webpack to package non-modular js

Modular packaging implementation method

webpack is a module packaging tool that recursively traverses its dependency graph through entry files, which is definitely a packaging tool.

export default function bar() {
 //
}

import bar from './bar';

bar();

The webpack configuration is quickly packaged through the following. Through plug-ins, we can also implement file compression, and in the development state, we can also configure sourceMap for code debugging (chrome browser supports sourcemap debugging).

 = {
 entry: './',
 output: {
  filename: ''
 },
 devtool: "source-map", 
  plugins: [
    // compress js
    new ({
      sourceMap: true
    })
  ]
}

Non-modular file packaging compression

Here we can use webpack to configure multi-entry files and ExtractTextPlugin plugin to compress non-module files into one file.

functon a() {
  ('m1 file')
}

functon b() {
  ('m2 file')
}

webpack configuration file

var webpack = require('webpack')
var path = require('path')

 = {
  entry: {
    'app': [
      './src/',
      './src/'
    ]
  },
  output: {
    path: (__dirname, "dist"),
    filename: "[name].js"
  }
}

After packaging, I found that I can't run it? ? The reason is that webpack packaging will put each file content into the closure function. We call the functions in the closure, of course it won't work.

/******/ (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, , __webpack_require__);
/******/
/******/    // Flag the module as loaded
/******/     = true;
/******/
/******/    // Return the exports of the module
/******/    return ;
/******/  }
/******/
/******/
/******/  // 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)) {
/******/      (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;
/******/  };
/******/
/******/  // 
/******/  __webpack_require__.o = function(object, property) { return (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);


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

 

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

function b() {
  ('b file')
}

/***/ })
/******/ ]);
//# sourceMappingURL=

What to do? We can modify our current code so that all functions or properties can be called through window objects.

(function(Demo) {
  
  Demo.module1 = {
    msg:function() {
      return 'Hello World';
    }

  }
})( =  || {})

Therefore, for the above closure form and all objects are hung on window objects, there will be no inability to call the function. Run normally after compression via webpack

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.