专栏首页志学Pythonwebpack打包原理入门探究(五)loader初探(一)

webpack打包原理入门探究(五)loader初探(一)

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

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>

嗯,loader 的初步探究就到此为止了

本文分享自微信公众号 - 志学Python(lijinwen1996329ken),作者:志学Python

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack打包原理入门探究(一)

    周五晚上发布了计划,计划一出来,就要坚定执行,不然怎么算得上男人这个称号呢?昨天已经研究了 vue 一些常用的 组件,也已经整理到自己的组件学习库中了,喜欢的伙...

    公众号---志学Python
  • webpack打包原理入门探究(七)模板处理

    起初为什么会想要学习 webpack 打包原理,只是因为好奇心发作,由于在工作中,我有处理过项目的首屏加载速度优化的过程,虽然但是是解决了加载问题,也对那些 l...

    公众号---志学Python
  • webpack打包原理入门探究(三)入口探究

    上面我们已经讲过了两节课了,感兴趣的伙伴,可以看看上面两节课的内容,大神勿扰,欢迎评论,给我提出更好的建议,谢谢。

    公众号---志学Python
  • 梳理 6 项 webpack 的性能优化

    webpack在启动后,会根据Entry配置的入口,递归解析所依赖的文件。这个过程分为「搜索文件」和「把匹配的文件进行分析、转化」的两个过程,因此可以从这两个角...

    Nealyang
  • 从webpack4打包文件说起

    一堆的webpack配置教程看腻了?这里有webpack4的打包及加载机制,要不了解一下?而这一切就得从打包文件说起。

    elson
  • 2、webpack从0到1-模块化规范

    Ewall
  • 用 TensorFlow.js 在浏览器中训练神经网络

    TensorFlow.js 是一个开源库,不仅可以在浏览器中运行机器学习模型,还可以训练模型。具有 GPU 加速功能,并自动支持 WebGL。可...

    用户1594945
  • Webpack 入门教程

    达达前端
  • 【Vue.js】Vue.js基本语法

    魏晓蕾
  • 单链表的头尾插法详解

    head 结点的数据域为空 head -> data = NULL, ,地址域为空 head -> next = NULL;

    忆想不到的晖

扫码关注云+社区

领取腾讯云代金券