webpack的简单使用
今天简单的说一下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的简单使用的更多相关文章
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这篇文章进行安装和破解 ...
- vue+node+es6+webpack创建简单vue的demo
闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...
- webpack的简单配置
本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...
- webpack 4 简单介绍
webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是 ...
- webpack最简单的入门教程里bundle.js之运行单步调试的原理解析
读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.to ...
- Node 使用webpack编写简单的前端应用
编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...
- webpack 的简单使用
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 } p. ...
随机推荐
- 第三篇:白话tornado源码之请求来了
上一篇<白话tornado源码之待请求阶段>中介绍了tornado框架在客户端请求之前所做的准备(下图1.2部分),本质上就是创建了一个socket服务端,并进行了IP和端口的绑定,但是未 ...
- Magento后台简单更换favicon.ico
刚才需要更换网站的favicon.ico,就是浏览器url前面的那个小图标. 网上稍微搜搜一下,然后就震惊了,号多方法是替换文件的方法,而且文件散步在网站的各个角落. 其实,后台是有直接上传更换的方法 ...
- iOS APP开发的小知识(分享)
亿合科技小编发现从2007年第一款智能手机横空出世,由此开启了人们的移动智能时代.我们从一开始对APP的陌生,到现在的爱不释手,可见APP开发的出现对我们的生活改变有多巨大.而iOS AP ...
- EF实体框架之CodeFirst一
对于SQL Server.MySql.Oracle等这些传统的数据库,基本都是关系型数据库,都是体现实体与实体之间的联系,在以前开发时,可能先根据需求设计数据库,然后在写Model和业务逻辑,对于Mo ...
- ElasticSearch基本学习
ES介绍 维基百科使用Elasticsearch来进行全文搜做并高亮显示关键词,以及提供search-as-you-type.did-you-mean等搜索建议功能. 英国卫报使用Elasticsea ...
- 【转载】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可 ...
- CSS中可以和不可以继承的属性
一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...
- 扩展Wcf call security service, 手动添加 Soap Security Head.
有次我们有个项目需要Call 一个 Java 的 web service, Soap包中需要一个 Security Head <soapenv:Header> <wsse:Secur ...
- 浅谈php中使用websocket
在PHP中,开发者需要考虑的东西比较多,从socket的连接.建立.绑定.监听等都需要开发者自己去操作完成,对于初学者来说,难度方面也挺大的,所以本文的思路如下: 1.socket协议的简介 2.介绍 ...
- struts2漏洞与修复
步骤: 1.下载struts-2.3.16.3-all, D:\TEST\struts2.3.16.3 2.替换jar,参考 http://blog.csdn.net/spyjava/article/ ...