webpack4 文档（入门） - 第七章 - module

89 阅读 0 评论 59 点赞

我是靠谱客的博主灵巧音响，最近开发中收集的这篇文章主要介绍webpack4 文档（入门） - 第七章 - module，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在模块化编程中，通常以“模块”为单位来编写应用程序，这种编程方式便于维护、测试和发现问题。在 web 端，模块化的支持姗姗来迟，许多模块化编程工具相继涌现，来解决模块化编程问题，webpack 便是其中一种工具。

通常，一个 module 模块就是指一个文件中导出的内容，webpack 会将这些 module 打包成一个或多个 chunk 。

Webpack Module

webpack 支持以下模块化语法：

ES2015（ES6）import ；
CommonJS require ；
AMD define 和 require；
css/sass/less @import ；
stylesheet image url url() 和 <img src=…>；

ES6 import

index.js

import {
    a,
    b,
    c
} from './module';
console.log(a, b, c);

module.js

const a = 1;
const b = 2;
const c = 3;
export {
    a,
    b,
    c
};

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].[chunkhash:20].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'}),
    ]
}

打包后代码（片段）

"./index.js": (function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval(`__webpack_require__.r(__webpack_exports__);n
    /* harmony import */ 
    var _module1__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./module1 */ "./module1.js");nrn
    console.log(
      _module1__WEBPACK_IMPORTED_MODULE_0__["a"], 
      _module1__WEBPACK_IMPORTED_MODULE_0__["b"], 
      _module1__WEBPACK_IMPORTED_MODULE_0__["c"]
    );nn
    //# sourceURL=webpack:///./index.js?`);
}),

"./module1.js": (function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval(`
  __webpack_require__.r(__webpack_exports__);n
  /* harmony export (binding) */ 
  __webpack_require__.d(__webpack_exports__, "a", function() { return a; });n
  /* harmony export (binding) */ 
  __webpack_require__.d(__webpack_exports__, "b", function() { return b; });n
  /* harmony export (binding) */ 
  __webpack_require__.d(__webpack_exports__, "c", function() { return c; });n
  const a = 1;rn
  const b = 2;rn
  const c = 3;rnnn
  //# sourceURL=webpack:///./module1.js?`);
})

CommonJS require

index.js

const {a, b, c} = require('./module');
console.log(a, b, c);

module.js

const a = 1;
const b = 2;
const c = 3;
module.exports = {
    a,
    b,
    c
};

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].[chunkhash:20].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'}),
    ]
}

打包后代码（片段）

"./index.js": (function (module, exports, __webpack_require__) {
  eval(`
    const {a, b, c} = __webpack_require__(/*! ./module */ "./module.js");
    console.log(a, b, c);
    //# sourceURL=webpack:///./index.js?`);
}),
"./module.js": (function (module, exports) {
  eval(`
    const a = 1;
    const b = 2;
    const c = 3;
    module.exports = {
      a, 
      b,
      c
    };
    //# sourceURL=webpack:///./module.js?`);
})

AMD define require

index.js

require(['./module'], function(module) { 
    console.log(module);
})

module.js

define({a: 1, b: 2, c: 3});

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].js',
        chunkFilename:'[id].js'
    },
    module: {
        rules: []
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'}),
    ]
}

amd 的代码打包后是懒加载模式的，使用 require 引入的代码会被打包成懒加载的 chunk ，它最终会被安装到主 chunk 中。

index.js

"./index.js": (function (module, exports, __webpack_require__) {
  eval(`
  __webpack_require__.e(/*! AMD require */ 0).then(function() { 
  /* WEBPACK VAR INJECTION */
    (function(module) {
      var __WEBPACK_AMD_REQUIRE_ARRAY__ = [__webpack_require__(/*! ./module */ "./module.js")]; 
      (function(module) {
          console.log(module);
      }).apply(null, __WEBPACK_AMD_REQUIRE_ARRAY__);
      /* WEBPACK VAR INJECTION */
    }.call(
      this, 
      __webpack_require__(/*! ./../../../../../../node/yarn/yarn_global/node_modules/webpack/buildin/module.js */ 
        "../../../../../../node/yarn/yarn_global/node_modules/webpack/buildin/module.js"
    )(module))
  )}).catch(__webpack_require__.oe)
  //# sourceURL=webpack:///./index.js?`);
})

module.js -> 0.js

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
  [0], {
    "../../../../../../node/yarn/yarn_global/node_modules/webpack/buildin/module.js": (function (module, exports) {
      eval(`
        module.exports = function(module) {
          if (!module.webpackPolyfill) {
            module.deprecate = function() {};
            module.paths = [];
            // module.parent = undefined by default
            if (!module.children) module.children = [];
            Object.defineProperty(module, "loaded", {
              enumerable: true,
              get: function() {
                return module.l;
              }
            });
            Object.defineProperty(module, "id", {
              enumerable: true,
              get: function() {
                return module.i;
              }
            });
            module.webpackPolyfill = 1;
          }
          return module;
        };
        //# sourceURL=webpack:///(webpack)/buildin/module.js?`);
    }),
    "./module.js": (function (module, exports, __webpack_require__) {
      eval(`
        !(module.exports = {a: 1, b: 2, c: 3});
        //# sourceURL=webpack:///./module.js?`);
    })
  }
]);

打包后的代码只能在与浏览器相同的环境中跑，因为它要用到 window 和 DOM 等。

css/sass/less @import

先安装 css-loader

yarn add css-loader -D

index.js

var cssModule = require('./index.css');
console.log(cssModule);
console.log(cssModule.toString());
console.log('index.js');

index.css

@import './module';
.index {
    color: orange;
}

module.css

.module {
    color:red;
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].[chunkhash:20].js'
    },
    module: {
        rules: [{
            test: /.css$/,
            use: 'css-loader',
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ]
}

如果在 js 里引入 css , 那么 css 模块的代码也会被打包到 chunk 里，打包后片段代码如下（去掉了 eval ）。

"./index.css": (function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  // 标记为 ES6 模块
  __webpack_require__.r(__webpack_exports__);
  /* harmony import */
  // css-loader 提供的一个函数，用于处理 css module ，返回一个 list 数组，并将其作为 css module 的默认导出
  var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
  /* harmony import */
  //这个函数返回的是 css-loader 生成的那个函数，即上面说的那个函数
  var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
  /* harmony import */
  // 导入的 module.css 模块，exports['default'] 是 list 数组
  var _node_modules_css_loader_dist_cjs_js_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! -!./node_modules/css-loader/dist/cjs.js!./module.css */ "./node_modules/css-loader/dist/cjs.js!./module.css");
  // Imports
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function (i) {
    return i[1]
  });
  // 安装 module.css 的 module ， 将还未安装的 module.css 的 module 的 list 元素 push 到 index.css module 的 list 中
  ___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_module_css__WEBPACK_IMPORTED_MODULE_1__["default"]);
  // Module
  // list 数组 push index.css 的内容
  ___CSS_LOADER_EXPORT___.push([module.i, `.index {
      color: orange;
    }`, ""]);
  // Exports
  /* harmony default export */
  // 导出 list 数组
  __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
  //# sourceURL=webpack:///./index.css?`
}),
"./index.js": (function (module, exports, __webpack_require__) {
  var cssModule = __webpack_require__( /*! ./index.css */ "./index.css");
  console.log(cssModule);
  console.log(cssModule.default.toString());
  console.log('index.js');

}),
"./node_modules/css-loader/dist/cjs.js!./module.css": (function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_require__.r(__webpack_exports__); /* harmony import */
  var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
  console.log(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__) // function a
  /* harmony import */
  var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
  console.log(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default); // function return function a
  // Imports
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function (i) { // cssWithMappingToString
    return i[1]
  });
  // Module
  console.log(module)
  ___CSS_LOADER_EXPORT___.push([module.i, `.module {
      color:red;
    }`, ""]);
  // Exports
  /* harmony default export */
  __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
  //# sourceURL=webpack:///./module.css?./node_modules/css-loader/dist/cjs.js
}),
// 会导出 css-loader 提供的的一个函数
"./node_modules/css-loader/dist/runtime/api.js": (function (module, exports, __webpack_require__) {
  "use strict";
  module.exports = function (cssWithMappingToString) { // css-loader 提供的的一个函数
    var list = []; // return the list of modules as css string
    // 将 list 变成 css string ， 如果有媒体查询，则为其添加媒体查询的 demo
    list.toString = function toString() {
      return this.map(function (item) {
        var content = cssWithMappingToString(item); // item 是一个数组，取第1个元素
        if (item[2]) { // 如果有第2个元素
          return "@media ".concat(item[2], " {").concat(content, "}");
        }
        // 没有第2个元素，直接返回第1个元素
        return content;
      }).join("");
    };
    // import a list of modules into the list
    // eslint-disable-next-line func-names
    list.i = function (modules, mediaQuery, dedupe) {
      if (typeof modules === "string") {
        // eslint-disable-next-line no-param-reassign
        modules = [
          [null, modules, ""]
        ];
      }
      var alreadyImportedModules = {};
      if (dedupe) {
        for (var i = 0; i < this.length; i++) {
          // eslint-disable-next-line prefer-destructuring
          var id = this[i][0];
          if (id != null) {
            alreadyImportedModules[id] = true;
          }
        }
      }
      for (var _i = 0; _i < modules.length; _i++) {
        var item = [].concat(modules[_i]);
        if (dedupe && alreadyImportedModules[item[0]]) {
          // eslint-disable-next-line no-continue
          continue;
        }
        if (mediaQuery) {
          if (!item[2]) {
            item[2] = mediaQuery;
          } else {
            item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
          }
        }
        list.push(item);
      }
    };
    return list;
  };
  //# sourceURL=webpack:///./node_modules/css-loader/dist/runtime/api.js?
})

执行打包后的代码，打印如下。

在这里插入图片描述

关于 sass 、 less 的处理方式还要引入对应的 loader ，后续的处理和上面的类似。

stylesheet url() 和 <img src=…>

先安装 url-loader

yarn add css-loader -D

在目录里新增一个 images 文件夹，并放置一张图片 xxx.png ，然后还是在上述代码的基础上改造，变更的代码如下。

index.css

@import './module';
.index {
    color: orange;
    background-image: url(./images/xxx.png);
}

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].[chunkhash:20].js'
    },
    module: {
        rules: [{
            test: /.css$/,
            use: 'css-loader',
        },{
            test: /.png$/,
            use: 'url-loader'
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ]
}

打包后的代码片段

"./images/xxx.png": (function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  __webpack_exports__["default"] = ("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAaCAYAAADCDsDeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANwSURBVGhD7ZgxSFtBGMf/lm4iJqGGhkAgBMSCg4FKKR1KMrxBcFFQCDgoDhFcHFVwEGJGF8EUig6hQgp2ERzeEKcOYkGHgrYQAoGQNkpMEOf27t69l7vkvSjKbfeDkHffe/nuu/99972P9EUiH/9Bo4QX/FujAC2uQrS4CtHiKkSLqxAtrkK0uArp+/LpL+tz787y2DKPmBGhDawtjGLAGgGtn/i8s4lI6iuMKLfhHhd78yjUgJixD+N6Hrvn/BYmMbs8BRxa9xmdPlGFmVnBCR+JJHrMszjez+1yzOzecJnFWWIWAp0zUcfWQY4NJb98TezZ+DayE2FmZpSLWOW/AdJYWg7CFP1S23oSET7yWsvL1cwM+aJizCH7Ktx2Kk1gEREWygJKpFHoeMYVFjxIADOuYrax4oj9zpO5+UZzHPEy9iKtZ9fIlSVwE5VGFLPGZDtJREgMBsiaMh3xusRGNyGbQtf6JcTN8YCXhSMUdoqoRN9hNmRZHiI25MPdTZWPekFE+OAjm+KepRLxJMYaRRdx0jDGgYtDcTFWzLfjSSTY2AdcnpLxlOsaaLzd0NjCqBzLsZ0c5HEReLwWXgg1N4erMr+kRJPIrpMdpJ9Umhv7MbZg2WgWFdwypJNQHDGU8cMuDz1IvCELvXTJllAQ/pabjyoaLR+Cjgg57B43MTa9QeaUKZnfiGB0Tdt8MyhhBAaruHLKmc0R6o1+BF7zoRuDo1i09Vnuno/i/UKjZYEcFfZxjgctC9x2CHIs3Z32gh5va9P2n50ZrpyvwGyMwojzsQPNdBL33i3ek/nXSPl4FrQs2Pp4lAdB3DRGok3UH5FhjNo5cRjFWy6Qf8gj2Fodt4N+p/iXzHkSEDl2LW4QqNzcu/vp8NGGZl53zCcHRWBCzFCB2ia2yPylYVo+OjPfZhLBwD0af/jwiXBxrbef/6z4cF20EY576bqJAaf2EWjtdEpBDuaZD8Yjsrxk0po5hyUh62LGNhHBzQd9oXnFTMsDYEw7LYcHJJu/kzKyIG9EIjVHav9pu9N5Ik4rVjmeabdSHm0TPFokitwmdbcmvdooGbnN6Wq3BB9izPSe3A7y1ot2CKSs9Zy/oxWTY3Nru35hRLLJWtjo/3MV4v1C0zwbLa5CtLgK0eIqRIurEC2uQrS4CtHiKkSLqwzgP7Xvi1Ic3P2aAAAAAElFTkSuQmCC");
}),
"./index.css": (function (module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_require__.r(__webpack_exports__);
  /* harmony import */
  var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
  /* harmony import */
  var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/ __webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
  /* harmony import */
  var _node_modules_css_loader_dist_cjs_js_module_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! -!./node_modules/css-loader/dist/cjs.js!./module.css */ "./node_modules/css-loader/dist/cjs.js!./module.css");
  /* harmony import */
  var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__( /*! ./node_modules/css-loader/dist/runtime/getUrl.js */ "./node_modules/css-loader/dist/runtime/getUrl.js");
  /* harmony import */
  var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/ __webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);
  /* harmony import */
  var _images_xxx_png__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__( /*! ./images/xxx.png */ "./images/xxx.png");
  // Imports
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function (i) {
    return i[1]
  });
  ___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_module_css__WEBPACK_IMPORTED_MODULE_1__["default"]);
  var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(_images_xxx_png__WEBPACK_IMPORTED_MODULE_3__["default"]);
  // Module
  ___CSS_LOADER_EXPORT___.push([module.i, `.index {
  color: orange;
  background-image: url( ${___CSS_LOADER_URL_REPLACEMENT_0___});
}`, ""]);
  __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
}),

控制台相关打印截图如下。
在这里插入图片描述

然后实践 html 中的 src 的处理，先装一下 html-loader 。

// 这里安装 v1 版本，其他版本安装执行后报错了...
yarn add html-loader@1 -D

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        index: './index.js',
    },
    output: {
        publicPath: '',
        path: __dirname + '/dist',
        filename: '[name].[chunkhash:20].js'
    },
    module: {
        rules: [{
            test: /.png$/,
            use: 'url-loader'
        },{
            test: /.html$/,
            use:[{
                loader:'html-loader'
            }] 
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ]
}

index.js


var htmlModule = require('./index.html');
console.log(htmlModule);
console.log('index.js');

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/xxx.png" alt="">
</body>
</html>

这里就不看打包后的代码了，因为 html-loader 也是将 html 文件变成了一个 module ，最后打印如下。

在这里插入图片描述

因为这里的 index.html是作为了模板的，它应该也会被 html-loader 处理，所以再来看看打包生成的的 index.html 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAaCAYAAADCDsDeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANwSURBVGhD7ZgxSFtBGMf/lm4iJqGGhkAgBMSCg4FKKR1KMrxBcFFQCDgoDhFcHFVwEGJGF8EUig6hQgp2ERzeEKcOYkGHgrYQAoGQNkpMEOf27t69l7vkvSjKbfeDkHffe/nuu/99972P9EUiH/9Bo4QX/FujAC2uQrS4CtHiKkSLqxAtrkK0uArp+/LpL+tz787y2DKPmBGhDawtjGLAGgGtn/i8s4lI6iuMKLfhHhd78yjUgJixD+N6Hrvn/BYmMbs8BRxa9xmdPlGFmVnBCR+JJHrMszjez+1yzOzecJnFWWIWAp0zUcfWQY4NJb98TezZ+DayE2FmZpSLWOW/AdJYWg7CFP1S23oSET7yWsvL1cwM+aJizCH7Ktx2Kk1gEREWygJKpFHoeMYVFjxIADOuYrax4oj9zpO5+UZzHPEy9iKtZ9fIlSVwE5VGFLPGZDtJREgMBsiaMh3xusRGNyGbQtf6JcTN8YCXhSMUdoqoRN9hNmRZHiI25MPdTZWPekFE+OAjm+KepRLxJMYaRRdx0jDGgYtDcTFWzLfjSSTY2AdcnpLxlOsaaLzd0NjCqBzLsZ0c5HEReLwWXgg1N4erMr+kRJPIrpMdpJ9Umhv7MbZg2WgWFdwypJNQHDGU8cMuDz1IvCELvXTJllAQ/pabjyoaLR+Cjgg57B43MTa9QeaUKZnfiGB0Tdt8MyhhBAaruHLKmc0R6o1+BF7zoRuDo1i09Vnuno/i/UKjZYEcFfZxjgctC9x2CHIs3Z32gh5va9P2n50ZrpyvwGyMwojzsQPNdBL33i3ek/nXSPl4FrQs2Pp4lAdB3DRGok3UH5FhjNo5cRjFWy6Qf8gj2Fodt4N+p/iXzHkSEDl2LW4QqNzcu/vp8NGGZl53zCcHRWBCzFCB2ia2yPylYVo+OjPfZhLBwD0af/jwiXBxrbef/6z4cF20EY576bqJAaf2EWjtdEpBDuaZD8Yjsrxk0po5hyUh62LGNhHBzQd9oXnFTMsDYEw7LYcHJJu/kzKyIG9EIjVHav9pu9N5Ik4rVjmeabdSHm0TPFokitwmdbcmvdooGbnN6Wq3BB9izPSe3A7y1ot2CKSs9Zy/oxWTY3Nru35hRLLJWtjo/3MV4v1C0zwbLa5CtLgK0eIqRIurEC2uQrS4CtHiKkSLqwzgP7Xvi1Ic3P2aAAAAAElFTkSuQmCC" alt="">
<script src="index.4ae18d04e0997fdb9c0a.js"></script></body>
</html>

支持的模块类型

CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus

只要提供对应的预处理器， webpack 就可以处理这些模块文件！

最后

以上就是灵巧音响为你收集整理的webpack4 文档（入门） - 第七章 - module的全部内容，希望文章能够帮你解决webpack4 文档（入门） - 第七章 - module所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端
浏览次数：89 次浏览
发布日期：2023-06-08 09:24:01
本文链接：https://www.kaopuke.com/article/k-p-k_14_ujokfy_13_jg2.html

webpack4 文档（入门） - 第七章 - module

概述

Webpack Module

ES6 import

CommonJS require

AMD define require

css/sass/less @import

stylesheet url() 和 <img src=…>

支持的模块类型

最后

评论列表共有 0 条评论

发表评论取消回复

webpack4 文档（入门） - 第七章 - module

概述

Webpack Module

ES6 import

CommonJS require

AMD define require

css/sass/less @import

stylesheet url() 和 <img src=…>

支持的模块类型

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复