今天简单的说一下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之路【第十八章】:Web框架

    Web框架本质 1.众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端 #!/usr/bin/env python # -*- codin ...

  2. 查看apache、linux、kernel、nginx等版本

    查看apache版本 /usr/sbin/apachectl -v httpd -v 安装目录,使用apachectl -v   查看mysql版本 mysql –help | grep Distri ...

  3. ASP.NET MVC EF 中使用异步控制器

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精   为什么使用异步操作/线程池 ASP.NET MVC ...

  4. DNS 中的协议字段详细定义

    DNS中的协议字段定义 Table of Contents 1 概述 2 DNS Classes 3 DNS OpCodes 4 DNS RCODEs 5 DNS Label Types 6 DNS资 ...

  5. 支持向量机(SVM)相关免费学习视频集锦

    http://www.matlabsky.com/thread-36823-1-1.html [其它] 支持向量机(SVM)相关免费学习视频集锦    [复制链接]     faruto 签到天数: ...

  6. 链接属性rel=’external’、rel=’nofollow’、rel=’external nofollow’三种写法的区别

    链接属性rel='external'.rel='nofollow'.rel='external nofollow'三种写法的区别   大家应该都知道rel='nofllow'的作用,它是告诉搜索引擎, ...

  7. 索尼Sony ATI显卡驱动 Win7 Win8 Win8.1 视频黑屏 解决方法

    索尼ATI显卡驱动 Win7  Win8  Win8.1 视频 黑屏 完美解决方法: 下载这个补丁 安装 即可 解决  ! baidu pan:  http://pan.baidu.com/s/1gd ...

  8. (五)SQL入门 数据库查询

    什么是查询?查询就是Select语句对数据库的探究. 查询是一种目的,一种需求,一种期望.是Select语句去实现的.Select语句不是只是指select语句,而是多个子句一起使用得组合. sele ...

  9. 在Ubuntu14.04_ROS_indigo上安装Kinect2驱动和bridge

    小乌龟:大乌龟,你这两周干么呢? 大乌龟:在Ubuntu14.04 ROS_indigo上装Kinect2的驱动和bridge 小乌龟:就装个驱动有什么难的 大乌龟:你说的对小乌龟,这确实不是问题,但 ...

  10. IE9浏览器中的My97日历控件刷新后无法打开问题解决办法

    解决办法如下: 1:找到WdatePicker.js 2:将$crossFrame:true 改为$crossFrame:false. 3:重启服务,刷新页面发现OK.