今天简单的说一下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. Python之路-python(mysql介绍和安装、pymysql、ORM sqlachemy)

    本节内容 1.数据库介绍 2.mysql管理 3.mysql数据类型 4.常用mysql命令 创建数据库 外键 增删改查表 5.事务 6.索引 7.python 操作mysql 8.ORM sqlac ...

  2. 《机电传动控制》PLC仿真

    1.红绿灯 经仿真,可以完成所设定的要求.对比普通的红绿灯,知识加了X25和X20的控制,来控制夜间模式 . 2.传送带 经仿真,可以完成所设定的要求. 总结:这两个仿真都是亲自完成,感觉难度有些大. ...

  3. (转)SVN服务器搭建和使用(二)

    上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首先打开Vi ...

  4. Hadoop基础知识

    摘要:Hadoop的安装目录了解.etc的核心配置项.hadoop的启动.HDFS文件的block块级副本的存放策略.checkpoint触发设置. 1.hadoop目录了解 bin:可执行文件,命令 ...

  5. postgresql修炼之道学习笔记(2)

    随后的章节  介绍了基础的sql,这个我略过了,我喜欢在开发的时候,慢慢的研究,毕竟有oracle的基础. 现在,学习psql工具 使用create database创建数据库的时候,出现如下问题: ...

  6. 利用zlib库进行zip解压

    1:到zlib官网上下载zlib,本文下载的是1.2.8的版本. 2:进行./configure,然后make. 3:进入zlib库中的contrib/minizip/路径下make,生成的miniz ...

  7. opencv的学习笔记5

    总结原博文中的一些边缘检测算子和滤波器.(Canny算子,  Sobel算子,  Laplace算子以及Scharr滤波器) 首先,一般的边缘检测包括三个步骤: 1)滤波:边缘检测的算法主要是基于图像 ...

  8. IISExpress 调试使用学习,使用附加到进程进行快速调试

    IIS8.0 Express已经推出了,大家可以通过Microsoft Web Platform Installer 进行安装.(VS2012,VS2013已经内置了,不需安装了) 1.IIS Exp ...

  9. 详解:数据库名、实例名、ORACLE_SID、数据库域名、全局数据库名、服务名及手工脚本创建oracle数据库

    数据库名.实例名.数据库域名.全局数据库名.服务名 , 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数 ...

  10. Monkey的ADB命令简单使用示例和解析

    进行简单的压力测试: 1. adb shell monkey –p 包名 –v-v 3000 >E:\bugLog.txt -v -v 标识打印的日志的详细级别为2级,更高级有3级,也可以用1级 ...