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 基本使用的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. Inno Setup 编译器操作

    Inno Setup 编译器 1◆ 下载inno ha_innosetup5502_skygz_DownG.com 2◆ 安装 next 3◆ 操作 success 4◆ 测试安装 5◆ 卸载 uni ...

  2. simulate mdns message

    use dns-sd command simulate mdns message: dns-sd -R test _test._tcp local 1234 a=1111111111111111111 ...

  3. Openwrt VLAN Configure(2)

    1      Scope of Document This document describes vlan design on nodewrt2p 2      Requiremen 2.1     ...

  4. 练习vue(用户管理)1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 0122有关List、Set、Map的练习

    import java.util.ArrayList; import java.util.HashMap; import java.util.HashSet; public class SZYL { ...

  6. ZOJ2540 Form a Square

    Form a Square 题意就是 判断 给你四个点,能否组成一个正方形 要点: 格式很重要, 很重要!!! 数据很小,直接暴力 四个点判断是否为正方形,只需将所有可能的边长度算出来,然后选其中最短 ...

  7. 玩转树莓派:OpenHAB的入门(二)

    通过第一篇的介绍,我们现在已经安装了OpenHAB和Demo House,那么接下来我们来看一下OpenHAB是如何工作的. OpenHAB如何工作? 接下来你会在openHAB配置的共享文件夹看到s ...

  8. php require include 区别

    php提供了两种包含外部文件的方法:include()和require().include()语句是一个常规的php函数:而require() 是一种特殊的语言结构,它的使用受到一些限制.对这两者来说 ...

  9. 深入理解uwsgi和gunicorn网络模型

    前言: 去年10月份建了一个python技术群,到现在为止人数已经涨到700人了.最一开始我经常在群里回应大家的问题,不管是简单还是困难的,我都会根据自己的经验来交流. 让人新奇的是一些初学者关注最多 ...

  10. node 相关

    1. 更新npm : npm install npm -g / cnpm install npm -g 2.安装cnpm npm install -g cnpm --registry=https:// ...