文档章节

webpack使用(一)

 冰shang蚊
发布于 2017/08/10 15:53
字数 537
阅读 51
收藏 0

webpack是一个模块打包器;提供很多不同环境下使用的插件。

webpack可对:.js、.png、.sass、.less、.css、.jpg、.hbs文件进行打包,打包后的文件格式有:.js、.css、.png、.jpg

webpack官网:https://webpack.github.io/

基本使用步骤:

一、启动Nodejs进入命令窗口环境;创建测试文件夹:XXX-webpack

二、通过命令cd XXX-webpack;初始化npm: npm init

三、通过npm命令安装webpack打包器;npm install webpack

四、通过编辑器打开创建的项目:XXX-webpack;创建一个测试打包js文件xx.js

五、在xx.js文件中编写测试js代码

function printInfo(str){
 alert(str);
}

六、通过命令:webpack xx.js xx.bundle.js;把测试js文件打包成xx.bundle.js文件

hash:打包生成的唯一标识

version:webpack版本

time:打包文件耗时多少

Asset:打包生成的文件

size:打包生成的文件大小

chunks:打包的文件分块

chunks name: 打包的文件分块名称

七、打包后文件内容:

/******/ (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 printInfo(str){
    alert(str);
}


/***/ })
/******/ ]);

八、如果xx.js引入其他的xxxx.js文件,则引入文件格式:require(‘引入文件目录及文件');然后对xx.js进行打包处理话,则会在打包的后的文件(xx.bundle.js)中出现xxxx.js文件内容,从而完成文件的合并。

九、如果需要进行打包css、sass、less文件时,需要通过npm命令安装其他插件:

css-loader 、less-loader、sass-loader、style-loader;打包图片则需要安装:file-loader或url-loader

© 著作权归作者所有

粉丝 1
博文 43
码字总数 29244
作品 0
海淀
私信 提问
Webpack 开发工具与模块热替换

Webpack 开发工具与模块热替换 ️ 注意: 永远不要在生产环境中使用这些工具,永远不要。 devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行。然而因为 webpac...

guitar_zp
2017/06/15
0
0
NodeJS开发 @Arthur

一、安装新命令模块,如cnpm,使用国内镜像 npm全称Node Package Manager,是node.js的模块依赖管理工具。由于npm的源在国外,所以国内用户使用起来各种不方便。业内同仁整理出了一部分国内优...

teamlog
2018/01/02
0
0
webpack 从入门到放弃(一)

什么是 webpack,为什么要使用 webpack 什么是 webpack 官网给出的概念是: 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,...

sunshine小小倩
2018/06/25
0
0
使用 Webapck 优化 VS Code 插件加载性能

Webpack 这一 JS 模块打包神器相信大家都不陌生了。由于 VS Code 插件大部分也都是 JS/TS 代码 + 依赖库的形式,因此也可以使用 Webpack 打包,优化性能。 本文将介绍如果利用 Webpack 大幅提...

jdneo
01/01
0
0
一小时包教会 —— webpack 入门指南

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。 我们可以直接使用 requ...

Yomut
2016/07/31
24
0

没有更多内容

加载失败,请刷新页面

加载更多

Guava RateLimiter + AOP注解实现单机限流、统计QPS

1、基于springboot项目pom.xml添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId></dependency><d......

铁骨铮铮
19分钟前
3
0
龙芯版办公软件下载

金山wps office   rpm包:http://ftp.loongnix.org/os/loongnix/1.0/os/Packages/w/wps-office-10.8.0.6472-1.a20p1.mips64el.rpm   deb包:http://packages.deepin.com/loongson/pool/......

gugudu
25分钟前
2
0
BI报表分析和数据可视化,推荐这三个开源工具!

开源篇 一、Superset 1、技术架构:Python + Flask + React + Redux + SQLAlchemy 2、使用人群: (1)开发/分析人员做好看板,业务人员浏览看板数据 (2)业务人员可自行编辑图表,查看满足...

飓风2000
31分钟前
1
0
CountDownLatch

CountDownLatch的概念 CountDownLatch是一个同步工具类,用来协调多个线程之间的同步,或者说起到线程之间的通信(而不是用作互斥的作用)。 CountDownLatch能够使一个线程在等待另外一些线程...

少年已不再年少
40分钟前
1
0
centos7 新手阿里云服务器安装mongodb

简介 MongoDB 是一个基于分布式 文件存储的NoSQL数据库 由C++语言编写,运行稳定,性能高 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案 MongoDB特点 模式自由 :可以把不同结构的文档存...

醉雨
50分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部