webpack 基本使用
1. 创建webpack-test文件夹
2. npm初始化
3. 安装webpack
4. 使用webpack打包
hello.js 是需要打包的文件 hello.bundle.js 是打包完以后文件的名称
hello.js文件
hello.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 hello(str) {
alert(str);
} /***/ })
/******/ ]);
5. 完整的例子
5.1 创建tom.js
5.2 创建main.css
5.3 在hello.js是引用css和js
5.4 创建index.html 并引用 hello.bundle.js
webpack 基本使用的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- Inno Setup 编译器操作
Inno Setup 编译器 1◆ 下载inno ha_innosetup5502_skygz_DownG.com 2◆ 安装 next 3◆ 操作 success 4◆ 测试安装 5◆ 卸载 uni ...
- simulate mdns message
use dns-sd command simulate mdns message: dns-sd -R test _test._tcp local 1234 a=1111111111111111111 ...
- Openwrt VLAN Configure(2)
1 Scope of Document This document describes vlan design on nodewrt2p 2 Requiremen 2.1 ...
- 练习vue(用户管理)1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 0122有关List、Set、Map的练习
import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; public class SZYL { ...
- ZOJ2540 Form a Square
Form a Square 题意就是 判断 给你四个点,能否组成一个正方形 要点: 格式很重要, 很重要!!! 数据很小,直接暴力 四个点判断是否为正方形,只需将所有可能的边长度算出来,然后选其中最短 ...
- 玩转树莓派:OpenHAB的入门(二)
通过第一篇的介绍,我们现在已经安装了OpenHAB和Demo House,那么接下来我们来看一下OpenHAB是如何工作的. OpenHAB如何工作? 接下来你会在openHAB配置的共享文件夹看到s ...
- php require include 区别
php提供了两种包含外部文件的方法:include()和require().include()语句是一个常规的php函数:而require() 是一种特殊的语言结构,它的使用受到一些限制.对这两者来说 ...
- 深入理解uwsgi和gunicorn网络模型
前言: 去年10月份建了一个python技术群,到现在为止人数已经涨到700人了.最一开始我经常在群里回应大家的问题,不管是简单还是困难的,我都会根据自己的经验来交流. 让人新奇的是一些初学者关注最多 ...
- node 相关
1. 更新npm : npm install npm -g / cnpm install npm -g 2.安装cnpm npm install -g cnpm --registry=https:// ...