目录结构:

入口文件:main.js

把项目所有的依赖文件都放进main.js

//1.使用CommonJs的模块化规范
const {add, mul} = require('./mathUtil.js') console.log(add(20, 30));
console.log(mul(20, 30)); //2.使用ES6的模块化规范
import {name, age, height} from './info'
console.log(name);
console.log(age);
console.log(height);

然后将main.js作为入口文件进行打包,webpack在打包的时候会查找所有的依赖文件并解析

打包命令:

webpack ./src/main.js ./dist/bundle.js

表示将src目录下的main.js 打包到dist目录下的bundle.js

然后在index.html里面只引用bundle.js就可以了

webpack打包工具简单案例的更多相关文章

  1. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  2. vue 之webpack打包工具的使用

    一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...

  3. Vue学习【第四篇】:Vue 之webpack打包工具的使用

    什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...

  4. Webpack实战(一):Webpack打包工具安装及参数配置

    为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...

  5. webpack打包器简单入门

    概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...

  6. Webpack打包工具学习使用

    Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 ...

  7. webpack打包工具的初级使用方法

    这里下载的是webpack的3.8.1版本(新版更新的使用有些问题) 什么是webpack? 他是一个前端资源加载或打包工具,. 资源: img css json等. 下载的话 用 npm webpa ...

  8. # webpack 打包工具(vue)

    vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...

  9. webpack 打包一个简单react组件

    安装Webpack,并加载一个简单的React组件 全局的npm模块安装: npm install -g webpack 安装jsx-loader npm install --save-dev jsx ...

随机推荐

  1. UVA 1045 最长公共子序列

    题目描述:求最长公共子序列 若给定序列X={x1,x2,...,xm},另一序列Z={z1,z2,...,zk},是X的子序列是指存在一个严格递增的下标序列{i1,i2,...,ik}使得对所以j=1 ...

  2. django中的url控制

    1.django中的第一个控件:url控制  (路由分发) urls.py:请求路径与视图函数的之间的关系 步骤: 1.首先是要配置环境,   2.其次就是引路径   3.在视图的文件夹里面写相应的函 ...

  3. sticky用法

    可以用于滚动到一定距离以后让他实现定位效果. 比如滚动到50px的时候让导航栏固定定位. 用法:给最外层的div设置绝对定位 然后要固定的div设置position:sticky; top:0: 这样 ...

  4. jmeter之JDBC请求

    jmeter不仅可以测试http请求,也可以执行JDBC请求的测试.本次以mysql为例,介绍JDBC请求如何完成发送 目录 1.环境配置 2.数据库连接配置 3.添加一个JDBC请求 1.环境配置 ...

  5. Delphi Canvas的FillRect(const Rect: TRect) 函数的作用

    http://blog.163.com/zhangzhifeng688@126/blog/static/165262758201131211341460/ Delphi Canvas的FillRect ...

  6. 大数据学习笔记之Zookeeper(四):Zookeeper实战篇(二)

    文章目录 4.1 分布式安装部署 4.2 客户端命令行操作 4.3 API应用 4.3.1 eclipse环境搭建 4.3.2 创建ZooKeeper客户端: 4.3.3 创建子节点 4.3.4 获取 ...

  7. ASP.NET MVC Filter过滤机制(过滤器、拦截器)

    https://blog.csdn.net/knqiufan/article/details/82413885 本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/ ...

  8. HTML--JS 多列求和

    <html> <head> <title>多列求和</title> <script type="text/javascript" ...

  9. Python程序打包为可执行文件exe

    Python程序打包为可执行文件exe,pyinstaller应用 山重水复疑无路,柳暗花明又一村. 本来是向老师提交一个python程序,因为第一次所以就很尴尬只把源码给老师了,应该是打包成一个可执 ...

  10. Spring学习(六)--渲染Web视图

    一.将模型数据渲染为Html 在上一篇文章中,我们所编写的控制器方法都没有直接产生浏览器中渲染所需的HTML.这些方法只是将数据填充到模型中,然后将模型传递给一个用来渲染的视图.这些方法会返回一个St ...