webpack 的简单使用
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #323333; background-color: #f7f7f7 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #323333 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #008080; background-color: #f7f7f7 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #dd2244; background-color: #f7f7f7 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #999988; background-color: #f7f7f7 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #323333; background-color: #f7f7f7; min-height: 14.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #999999; background-color: #f7f7f7 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #011480; background-color: #f7f7f7 }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #4078c0 }
li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 }
span.s1 { color: #323333 }
span.s2 { color: #323333 }
span.s3 { color: #4078c0 }
span.s4 { }
span.s5 { color: #0086b3 }
span.s6 { color: #999988 }
span.s7 { color: #008080 }
span.s8 { color: #dd2244 }
span.s9 { color: #011480 }
ul.ul1 { list-style-type: disc }
1.该案例的目录结果如下
zpvue
app
main.js
module1.js
module2.js
public
bundle.js
index.html
package.json
webpack.config.js
2.安装 webpack
npm install webpack --save-dev --registry=https://registry.npm.taobao.org
使用以下命令进行webpack 初始化
npm init
配置webpack.json文件
{
"name": "zpvue",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack -p" //对应5.webpack 的命令
},
"author": "zeopean",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.26.0",
"extract-text-webpack-plugin": "^1.0.1",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.3"
}
}
- scripts:start 明亮对应 ＝>5.webpack 的命令
- scripts.devDependencies 在3.安装加载器时会主动添加
3.安装loader 加载器
npm install sass-loader style-loader css-loader extract-text-webpack-plugin --save-dev --registry=https://registry.npm.taobao.org
4.配置webpack.config.js 文件
/**
* Created by zeopean on 16/11/19.
*/
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
//页面入口
entry:{
index: './app/main.js'
},
//入口文件输出配置
output:{
path:'./public',
filename:'bundle.js'
},
//加载模块
module:{
loaders:[{
test:'/\.sass$/',
loader:ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')
}]
},
plugins:[
new ExtractTextPlugin('[name].css')
]
};
- entry 表示入口
- output 表示输出打包后的bundle.js
- module表示加载器
5.webpack 的命令
关于webpack的启动方式：
webpack // 最基本的启动webpack的方法
webpack -w // 提供watch方法；实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map，方便调式代码
6.引入输出的bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack demo</title>
</head>
<body>
</body>
<script type="text/javascript" src="../public/bundle.js"></script>
</html>
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的使用. 打开cmd(也可以用别的看个人爱好) 打开你要创建项目的文件夹: webpack安装: 1.全局安装webpack:$npm install webpack - ...
- 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 ...
随机推荐
- linux yum 命令
linux yum 命令 yum( Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器. 基於RPM包管理,能够从指 ...
- tp中session用来做权限方法 （缓解mysql压力）
http://www.thinkphp.cn/code/2617.html
- Ninject之旅之八：Ninject插件模型（附程序下载）
摘要 在前面的章节中,我们看了在单一的绑定条件下Ninject能够处理依赖类型,就是说,每个服务类型只绑定到单一的实现类型.然而,有些情况下我们需要绑定一个抽象服务类型到多个实现,这叫多个绑定.多个绑 ...
- JUC.Condition学习笔记[附详细源码解析]
目录 Condition的概念 大体实现流程 I.初始化状态 II.await()操作 III.signal()操作 3个主要方法 Condition的数据结构 线程何时阻塞和释放 await()方法 ...
- 100怎么变成100.00 || undefined在数字环境下是：NaN || null在数字环境下是0 || 数组的toString()方法把每个元素变成字符串，拼在一起以逗号隔开 || 空数组转换成字符串后是什么?
100怎么变成100.00?
- spring代理模式 service远程调用，插件执行
最近,研究了一下平台远程调用的过程,和service层插件执行的原理,记录一下. 1.远程service调用过程 首先看一下类的继承结构 封装调用处理过程 封装service调用接口 封装servic ...
- STP的作用和操作
STP的作用 STP通过阻塞端口来消除环路,并能够实现链路备份的目的 STP的操作 选举一个根桥 比较交换机的桥ID,越小越优先 桥ID 是8个字节,2个字节的优先级+6个字节的MAC地址 2.每个 ...
- javascript 零星知识点
通过js动态生成的元素绑定事件.不能通过js获取元素对象,并赋予事件,最简捷的途径就是将事件直接添加到属性中(DOM0);
- C++中extern关键字用法小结
总结C++中关于extern关键字的用法. 1.变量的生明和定义中 C++语言支持分离式编译机制,该机制允许将程序分割为若干个文件,每个文件可被独立编译.为了将程序分为许多文件,则需要在文件中共享代码 ...
- subversion(SVN)安装配置
简介subversion(简称svn)是近年来崛起的版本管理软件系统,是cvs的接班人.目前,绝大多数开源软件都使用svn作为代码版本管理软件.Subversion是一个版本控制系统,相对于的RCS. ...