zoukankan      html  css  js  c++  java
  • webpack学习笔记一

    webpack、gulp、grunt是前端打包功能工具;因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack。本篇是webpack学习笔记系列的第一篇,欢迎指教。

    我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的。

    首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令:

    npm install --g webpack或cnpm install --g webpack
    

    然后利用cd命令打开学习webpack所在文件地址,执行本地安装命令,全局安装是为了在window任意位置都可以使用webpack命令;而本地安装则是在当前文件夹下应用webpack.

    本地安装命令:

    npm install --save-dev webpack或cnpm install --save-dev webpack

    具体代码html代码:

     <html>
       <head>
         <title>Getting Started</title>
         <meta charset="utf-8">
       </head>
       <body>
        <script src="./dist/bundle.js"></script>
       </body>
      </html>
    

    js代码:

    function test(){
    	var div=document.createElement("div");
    	div.innerHTML="这是一个测试数据";
    	document.body.appendChild(div);
    }
    test();
    

    不用webpack.config.js文件,执行

    webpack src/index.js dist/bundle.js 命令

    结果就会生成打包文件:/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, {
    /******/ 				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 = 0);
    /******/ })
    /************************************************************************/
    /******/ ([
    /* 0 */
    /***/ (function(module, exports) {
    
    function test(){
    	var div=document.createElement("div");
    	div.innerHTML="这是一个测试数据";
    	document.body.appendChild(div);
    }
    test();
    
    /***/ })
    /******/ ]);
    

    完毕!

    总结:本文是学习webpack的第一篇笔记,主要讲了怎么不使用webpack.config,js下如果打包js,文件。注意:本文默认学习者已经安装了nodejs会用npm和cnpm.

    我站在山顶看风景!下面是我的家乡!
  • 相关阅读:
    火狐浏览器清理缓存快捷键
    SVN使用教程总结
    如何登陆服务器
    get、put、post、delete含义与区别
    zookeeper 半数可用/选举机制
    zookeeper 分布式安装/配置/启动
    lucene 统计单词次数(词频tf)并进行排序
    selenium 爬取空间说说
    MapReduce自定义InputFormat,RecordReader
    reduce 阶段遍历对象添加到ArrayList中的问题
  • 原文地址:https://www.cnblogs.com/zhensg123/p/7309251.html
Copyright © 2011-2022 走看看