今天简单的说一下webpack的使用。

打开cmd(也可以用别的看个人爱好)

打开你要创建项目的文件夹;

webpack安装:

1.全局安装webpack:$npm install webpack -g    ​(npm超时的可以试试cnpm代替)

2.安装完成后可以使用webpack的命令执行查看一下:$webpack -h (查看帮助目录)

3.建议在项目中安装一份本地webpack:$npm install webpack

webpack初始化项目:

1.创建一个html的文件index.html,这个就不多说了。

2.创建一个package.json用于保存版本信息:$npm init   //之后就狂敲回车吧

webpack的配置:

在单页面的应用里面项目通常会有一个入口文件,假设是 main.js ,需要通过webpack指明他的位置的。

1.在项目的根目录新建一个webpack.config.js (这是webpack默认配置文件名称)

2.在webpack.config.js里面写入口文件和接口文件:

model.exports={

​entry : './main.js' //入口文件设置

​output::{

​path : '_dirname' //输出文件的保存路径

​filename: 'bundle.js' //输出文件名称

​    ​    ​    ​    ​}

};

3.在index.html文件中引用bundle.js

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

好啦,就说到这里吧,祝大家早日脱坑!

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

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

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

  2. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

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

    使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解 ...

  4. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  5. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  6. webpack 4 简单介绍

    webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是 ...

  7. webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

    读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.to ...

  8. Node 使用webpack编写简单的前端应用

    编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...

  9. webpack 的简单使用

    p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 } p. ...

随机推荐

  1. Docker容器时间与宿主机时间不一致的问题

    通过date命令查看时间 查看主机时间   1 2 [root@localhost ~]# date 2016年 07月 27日 星期三 22:42:44 CST 查看容器时间   1 2 root@ ...

  2. php字符截取

    mb_substr($str,0,2) 0 索引的位置  2 长度 mb_substr($str,0,-1) 最后一位如果是负数 表示从前面0开始到后面-1 0,-1都是索引

  3. SecureCRT连接VirtualBox下的ubuntu以及NMP的搭建与通过宿主机访问该NGINX服务器过程

    一直使用wamp作为开发环境,只是工作中时常会遇到在wamp下没问题但是提交到服务器生产环境会出现一些意想不到的情况,由此萌生了在本机搭建LNMP环境的想法,我个人不知道其他人的虚拟机搭建服务器环境是 ...

  4. 使用nginx-http-concat添加nginx资源请求合并功能

    web项目中有时候一个页面会加载多个js或css资源请求,导致页面加载耗时较长,这时优化的方向可以采用资源合并,可以在客户端事先合并,也可以在服务端进行资源合并,服务端合并的方式使用起来更灵活. ng ...

  5. iOS代码签名理解

    前言 做了几年iOS app coder了,对于证书的生成.使用流程烂熟于心,然而对于这套机制的原理却一直不甚理解.近来由于工作需要仔细研究了一下,特将自己的学习经验记录于此,以供大家学习指正. 问题 ...

  6. PAT树_层序遍历叶节点、中序建树后序输出、AVL树的根、二叉树路径存在性判定、奇妙的完全二叉搜索树、最小堆路径、文件路由

    03-树1. List Leaves (25) Given a tree, you are supposed to list all the leaves in the order of top do ...

  7. sublime text3 前端编译神器,浏览器实时显示

    前端编译器有很多,Dreamweaver,sublime text ,webstorm,但在使用之后感觉sublime text3就是前端的编译神器 首先sublime text3最好使用英文原版,虽 ...

  8. 18.有一个网页地址, 比如PHP开发资源网主页: http://www.phpres.com/index.html,如何得到它的内容?

    方法1(对于PHP5及更高版本): $readcontents = fopen("http://www.phpres.com/index.html", "rb" ...

  9. Android--带你一点点封装项目 MVP+BaseActivity+Retrofit+Dagger+RxJava(一)

    1,其实早就想把这些东西给封装封装的,一直没有时间,今天刚好项目进入到测试阶段了,Bug同事在哪儿测试的飞起,但发现提bug的尽然是我(得意脸),然后上午把ios的包测试了一下,顺便把服务器给测挂了( ...

  10. UVA 11624 BFS的妙用

    题意: 迷宫里起火了,有若干个障碍物,有多个起火点,起火点每经过一个时间间隔就向它的上下左右相邻的格子扩散. 有个倒霉的人好像叫做“Joe”,他要逃出来,他每次可以向上下左右任意移动一格,但是即要避开 ...