目录结构:

入口文件: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. pycharm默认的模板修改python script

    #!/usr/bin/env python # encoding: utf-8 #set( $SITE = "https://www.cnblogs.com/c-x-a" ) &q ...

  2. php 标准库之ArrayObject

    以下为ArrayObject的常用函数: ArrayIterator::current( void ) //返回当前数组元素 ArrayIterator::key(void) //返回当前数组key ...

  3. IDEA 服务启动报:No buffer space available (maximum connections reached): connect的解决方案。

    错误提示:严重: Error starting endpointjava.io.IOException: Unable to establish loopback connectionat sun.n ...

  4. day26—JavaScript对CSS样式的获取和修改实践

    转行学开发,代码100天——2018-04-11 通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能.对于CSS样式通常有行内样式,外部样式,内嵌样式之分. 如: 行内样式: ...

  5. 16/8/23-jQuery子调用匿名函数

    通过创建一个自调用匿名函数,创建一个特殊的函数作用域,该作用域中的代码不会和已有的同名函数.方法和变量以及第三方库冲突. 自调用匿名函数写法 方法一: (function(){ //... })(); ...

  6. 16/7/11_PHP-日期和时间

    取得当前的Unix时间戳 UNIX 时间戳(英文叫做:timestamp)是 PHP 中关于时间与日期的一个很重要的概念,它表示从 1970年1月1日 00:00:00 到当前时间的秒数之和. PHP ...

  7. python实现获取文件的绝对路径

    实现代码如下: #获取文件的绝对路径import osclass GetPath: def get_path(self,path): r=os.path.abspath(path) return ri ...

  8. mysql的命令入门

    mysql入门实践 学习教程 教程链接地址 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 文 ...

  9. jmeter uniq 取值方式设置

  10. 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(上) 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(下)

    微信.QQ.新浪微博等第三方登录,你想知道的都在这了(上):https://www.jianshu.com/p/133d84042483 微信.QQ.新浪微博等第三方登录,你想知道的都在这了(下):h ...