webpack打包原理入门探究（五）loader初探（一）

同名公众号 - 人生代码

于 2020-06-03 08:10:47 发布

阅读量835

点赞数

本文链接：https://blog.csdn.net/qq_36772866/article/details/106536435

版权

webpack打包原理入门探究（四）插件探究（下）

webpack打包原理入门探究（四）插件探究（上）

webpack打包原理入门探究（三）入口探究

webpack打包原理入门探究（二）基本配置

webpack打包原理入门探究（一）

我们这一节会准备一些文件夹，之前的配置当作不存在，

layer.html

<div class="layer">
        this a layer
</div>

layer.scss

.layer {
    height: 100px;
    width: 100px;
    background: cadetblue;
    color: crimson;
}

layer.js

import tpl from './layer.html'
function layer() {
    return {
        name: 'layer',
        tpl: tpl
    }
}

export default  layer

src/app.js

import layer from './components/layer/layer.js'

const App = () => {
    console.log("layer==>", layer)
}

new App()

添加 webpack.app.config.js 文件, 配置 module, 用于加载 loader

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: resolve('src/app.js'), // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name].bundle.js",
        // publicPath: ''
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "index.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
        })
    ]
}

你需要安装 babel-loader, babel-core, babel-preset-env

配置 package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode development",
    "webpack.dev": "webpack --mode development --config webpack.dev.config.js",
    "webpack.entry": "webpack --mode development --config webpack.entry.config.js",
    "webpack.entry.object": "webpack --mode development --config webpack.entry.object.config.js",
    "webpack.html.plugin": "webpack --mode development --config webpack.html.plugin.config.js",
    "webpack.html.plugin.multi": "webpack --mode development --config webpack.html.plugin.multi.config.js",
    "webpack.app": "webpack --mode development --config webpack.app.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.7.4",
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

你还得配置一下 .babelrc 配置文件，配置一下 preset-env, 根目录新建一个 .babelrc 文件

{
    "presets": [
        ["@babel/preset-env", {
          "loose": true,
          "modules": false
        }]
      ]
}

接着就是 npm run webpack.app

发现报错了，

我们要修改一下 webpack.app.config.js：

再跑一边

原来是缺少一个 loader 去加载 html

npm install --save-dev html-loader

修改一下 webpack.app.config.js

再来跑一遍

生成的 main.bundle.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;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// 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 = "./src/app.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/app.js":
/*!********************!*\
  !*** ./src/app.js ***!
  \********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_layer_layer_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/layer/layer.js */ \"./src/components/layer/layer.js\");\n\n\nvar App = function App() {\n  console.log(\"layer==>\", _components_layer_layer_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n};\n\nnew App();\n\n//# sourceURL=webpack:///./src/app.js?");

/***/ }),

/***/ "./src/components/layer/layer.html":
/*!*****************************************!*\
  !*** ./src/components/layer/layer.html ***!
  \*****************************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("module.exports = \"\\r\\n<div class=\\\"layer\\\">\\r\\n        this a layer\\r\\n</div>\";\n\n//# sourceURL=webpack:///./src/components/layer/layer.html?");

/***/ }),

/***/ "./src/components/layer/layer.js":
/*!***************************************!*\
  !*** ./src/components/layer/layer.js ***!
  \***************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _layer_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./layer.html */ \"./src/components/layer/layer.html\");\n/* harmony import */ var _layer_html__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_layer_html__WEBPACK_IMPORTED_MODULE_0__);\n\n\nfunction layer() {\n  return {\n    name: 'layer',\n    tpl: _layer_html__WEBPACK_IMPORTED_MODULE_0___default.a\n  };\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (layer);\n\n//# sourceURL=webpack:///./src/components/layer/layer.js?");

/***/ })

/******/ });

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <!-- 哈哈哈哈哈 -->
    <h5>htmlWebpackPlugin object</h5>
    <%
        for(let key in htmlWebpackPlugin) {
    %>
            <%= key %>
            ---
            <%= htmlWebpackPlugin[key] %>
    <% } %>
    <h5>htmlWebpackPlugin.files</h5>
    <%
        for(let key in htmlWebpackPlugin.files) {
    %>
            <%= key %>
            ---
            <%= htmlWebpackPlugin.files[key] %>
    <% } %>
    <h5>htmlWebpackPlugin.options</h5>
    <%
        for(let key in htmlWebpackPlugin.options) {
    %>
            <%= key %>
            ---
            <%= htmlWebpackPlugin.options[key] %>
    <% } %>
<script type="text/javascript" src="js/main.bundle.js"></script></body>
</html>