安装webpack在文件夹中

安装完成如图所示

牛刀小试

在webpack-test根目录下新建一个hello.js (不新建在node-modules文件夹下面的目的是,该文件夹是webpack的依赖,我们自定的文件不去破坏它,并且我们以后上传代码的时候不会上传该文件夹,只需在上一节的package.json中配置该文件的版本,用到的时候只需npm下载)

这里我用的是es6的写法,编辑器报错,必须的设置一下IDEA(右上角File -> Settings -> Languages & Frameworks -> JavaScripts) 选择ECMAscript 6 -> OK 设置完成会发现没有红色警告了

打包第一个webpack文件 输入命令webpack hello.js hello.bundle.js  按回车打包  语法是webpack 打包的文件名 打包完成后的文件名 hello.js是要被打包的文件名 hello.bundle.js是打包完成后的文件名

打包完成后 会出现一些选项 例如 Hash Version Time 这些可供你参考

打开我们打包完成后的 hello.bundle.js 上面webpack自动生成的代码 你可以忽视它 拉倒最下面 这是第0个模块 在里面就是我们的代码。第一个webpack打包完成。

webpack第一节(2)的更多相关文章

  1. webpack第一节(1)

    跟着慕课网的老师做了下笔记 webpack是一个前端打包工具 它可以优化网页.例如 页面模块化加载.图片优化.css.js压缩等等. 模块化加载也就是懒加载,按需加载,以前的模式是所以得css写在一起 ...

  2. webpack第一节(3)

    模块化加载 上一节进行了一个简单的模块化加载,复杂点 新建一个js文件 名为 world.js 依旧在根目录下 在hello.js中引入world.js 模块化加载,world.js是一个模块 引入的 ...

  3. webpack第一节(4)

    每次修改了代码都需要重新手动打包,这样很麻烦,不符合webpack的初衷,我们查看webpack帮助看看有没有可以自动运行的方法 输入 webpack -help 可以发现有个 --watch方法 它 ...

  4. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  5. android内部培训视频_第一节

    声明:本视频为公司内部做android培训时录制的,无任何商业目的.同时鉴于水平有限,可能不符合您的需求,放在这里的目的是提供给公司同事下载,作为培训的一个记录,也作为一个系列教程的自我督促完成的理由 ...

  6. 我的第一节Android课

    我的第一节安卓课程,今天非比寻常的一天,我开始了我程序猿之路的第一节安卓课程,安卓课程只是我的一个兴趣班,我的本专业是java开发,因为喜欢做一个属于自己的一个手机APP,就选多个一样技能,毕竟十八般 ...

  7. 第四章 跨平台图像显示库——SDL 第一节 与SDL第一次亲密接触

    http://blog.csdn.net/visioncat/article/details/1596576 GCC for Win32 开发环境介绍(5) 第四章 跨平台图像显示库——SDL 第一节 ...

  8. Centos7 Openstack - (第一节)基本环境配置

    Centos7 install Openstack - (第一节)基本环境配置 我的blog地址:http://www.cnblogs.com/caoguo 根据openstack官方文档配置 官方文 ...

  9. seajs第一节,seajs基本使用

    什么是seajs,它是干什么使用的,可以去网上搜索一下, 官网:http://seajs.org/docs/ 基本使用seajs <!DOCTYPE html> <html> ...

随机推荐

  1. 02.自定义banner、全局配置文件、@Value获取自定义配置、@ConfigurationProperties、profiles配置

    自定义banner src/main/resource 下新建 banner.txt,字符复制到banner.txt 中 生成字符网站推荐: http://patorjk.com/software/t ...

  2. ASP.NET MVC中的捆绑和压缩技术

    概述 在众多Web性能优化的建议中有两条: 减少Http请求数量:大多数的浏览器同时处理向网站处理6个请求(参见下图),多余的请求会被浏览器要求排队等待,如果我们减少这些请求数,其他的请求等待的时间将 ...

  3. 【leetcode】126. Word Ladder II

    题目如下: 解题思路:DFS或者BFS都行.本题的关键在于减少重复计算.我采用了两种方法:一是用字典dic_ladderlist记录每一个单词可以ladder的单词列表:另外是用dp数组记录从star ...

  4. 【Flutter学习】基本组件之弹窗和提示(SnackBar、BottomSheet、Dialog)

    一,概述 Flutter中的操作提示主要有这么几种 SnackBar.BottomSheet.Dialog,因为 Dialog样式比较多,放最后讲好了 二,介绍 SnackBar SnackBar的源 ...

  5. BZOJ 1018: [SHOI2008]堵塞的交通traffic(线段树分治+并查集)

    传送门 解题思路 可以离线,然后确定每个边的出现时间,算这个排序即可.然后就可以线段树分治了,连通性用并查集维护,因为要撤销,所以要按秩合并,时间复杂度\(O(nlog^2 n)\) 代码 #incl ...

  6. 日期和时间格式(ISO 8601)

    参考 ISO 8601 - Wikipedia ISO 8601 Date and time format

  7. 至强E3-1200 系列部分参数

    1155 Xeon E3-1275V2(E1) Ivy Bridge 3.5GHz BLK 100MHz 8MB 77W All 1155* Xeon E3-1270V2(E1) Ivy Bridge ...

  8. Linux下实现MySQL数据库每天定时自动备份

    使用MySQL自带的备份工具+ crontab 的方式来实现备份 1.查看磁盘挂载信息(选一个容量合适的) #df -h 2.创建备份目录 为了方便,在/home保存备份文件: cd /home/ga ...

  9. JS中基本数据类型和引用类型最根本的区别

    栈内存和堆内存:https://segmentfault.com/a/1190000015118062 https://segmentfault.com/a/1190000016389376 变量:内 ...

  10. pyppeteer模块的基本使用

    pyppeteer模块的基本使用 引言 Selenium 在被使用的时候有个麻烦事,就是环境的相关配置,得安装好相关浏览器,比如 Chrome.Firefox 等等,然后还要到官方网站去下载对应的驱动 ...