备注：
 使用yarn 结合npm 模块进行简单项目开发
1. 安装
yarn init

yarn add webpack --dev

yarn global add live-server
2. 添加shoritd 依赖模块
yarn  add shoritd
3. 项目结构
├── index.html

├── main.js

├── package.json

├── show.js

├── webpack.config.js

└── yarn.lock
代码说明 
index.html
<html>

<body>

<div id="app"></div>

<script src="./dist/bundle.js"></script>

</body>

</html>
show.js
function demo(content){

window.document.getElementById("app").innerText="this is a demo"+content;

}

module.exports=demo;
main.js
const shortid = require("shortid");

const demo = require("./show.js");

demo(shortid.generate());
webpack.config.js
const path = require("path");

module.exports = {

  entry:"./main.js",

  output:{

   filename:"bundle.js",

   path:path.resolve(__dirname,"./dist"),

  }

}
4. 构建
yarn run build
5. 效果
 
6. 参考资料
https://webpack.github.io/

https://www.npmjs.com/package/shortid
 
 
 
 

webpack 简单使用的更多相关文章

  1. webpack简单原理及用法

    前言 如果你已经对Webpack精通了或者至少一直在工作中使用它,请关闭当前浏览器标签,无视这篇文章. 这篇文章本意是写给我自己看的,作为一篇Cookbook供快速查询和上手用.原因是虽然工作中会涉及 ...

  2. vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)

    1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...

  3. webpack 简单笔记（一）

    安装部分不介绍了 (一)第一个最简单的demo,单入口,单文件 目录结构: webapck.config.js中代码: 'use strict' const path = require('path' ...

  4. webpack简单笔记

    本文简单记录学习webpack3.0的笔记,已备日后查阅.节省查阅文档时间 安装 可以使用npm安装 //全局安装 npm install -g webpack //安装到项目目录 npm insta ...

  5. webpack 简单配置

    webpack.config.js const path = require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin ...

  6. webpack简单教程

    1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行 ...

  7. webpack简单修改版本号(单页面)

    写了一个js文件,可以尽量最简单的修改版本号 package.json配置: updateV.js放置位置: updateV.js: var fs = require('fs'); //文件读写 va ...

  8. webpack简单的打包体验

    怎么使用webpack 进行打包 需要使用管理员权限进行安装 npm install webpack -g npm install webpack-cli -g 创建站点 mkdir webpack ...

  9. webpack简单学习的入门教程

    前言,如果按照官网的安装办法: npm install webpack -g 安装的是最新版的,然后就莫名其妙的有问题(可以安装,但运行有问题).我是小白,我也不知道具体原因,所以我换成2.5.1版本 ...

随机推荐

  1. Spring MVC:控制器类名称处理映射

    控制器类名称处理映射的好好处是: 如果项目是hello,WelcomeController是控制器,那么访问地址是: http://localhost:8080/hello/welcome http: ...

  2. 基于哈夫曼编码的压缩解压程序（C 语言）

    这个程序是研一上学期的课程大作业.当时,跨专业的我只有一点 C 语言和数据结构基础,为此,我查阅了不少资料,再加上自己的思考和分析,实现后不断调试.测试和完善,耗时一周左右,在 2012/11/19 ...

  3. WIN10局域网共享,经常出现无法访问的现象的解决方法

    WIN10的局域网共享是真操蛋啊,用着好好的,重启了一下,突然就不好用了,其他人无法访问我的电脑,百度了半天也没有找到能解决的访问,文章中说的都试过了,该开启的也都开启了,防火墙也关了,没用,后来想着 ...

  4. SSM配置Socket多线程编程（RFID签到实例）

    1.SocketServiceLoader.java package cn.xydata.pharmacy.api.app.test; import javax.servlet.ServletCont ...

  5. 2-1 RHEL6.5 环境搭建与部署

    第二部分:Linux常见服务管理 2-1 RHEL6.5 环境搭建与部署 第二部分主要讲解的是开源服务搭建 学习方法与注意事项: 1. 端正态度,开始学习 2. 认真完成作业和实验(并详细记录) 3. ...

  6. 原生javascript-日历插件编写

    在线实例:http://lgy.1zwq.com/calendar/ 按照我们常用的日历格式,是7*6的格子,所以生成格子的总数就确定为42 例子:(如:2013年8月,这个时间为例子) /*---- ...

  7. 006PHP基础知识——数据类型（三）

    <?php /** * 数据类型(三) * PHP是一个弱类型的语言 */ //检测数据类型:gettype() 返回字符串的数据类型 /*$str="美丽中国"; echo ...

  8. 【2018 “百度之星”程序设计大赛 - 初赛（B）- 1001】degree

    Problem Description 度度熊最近似乎在研究图论.给定一个有 N 个点 (vertex) 以及 M 条边 (edge) 的无向简单图 (undirected simple graph) ...

  9. LeetCode OJ：Merge k Sorted Lists（归并k个链表）

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. 类 ...

  10. LeetCode OJ：Longest Substring Without Repeating Characters（最长无重复字符子串）

    Given a string, find the length of the longest substring without repeating characters. For example, ...