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 ...
随机推荐
- 数据库——DQL（语句查询）
查询的基本结构: 概念: 查询(DQL)是数据库中最为常用和复杂的一种SQL结构,学会编写查询SQL是程序员必须具备的能力. 要从数据库中查询数据,我们要使用SQL的SELECT语句.标准SELECT ...
- 用JS实现九九乘法表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CentOS 6下Apache的https虚拟主机实践
题目:1.建立httpd服务器,要求: 提供两个基于名称的虚拟主机: (a)www1.buybybuy.com,页面文件目录为/web/vhosts/www1:错误日志为/var/log/httpd/ ...
- 超牛的VS菜单
所有菜单都重复了,Google到了解决办法:devenv /resetuserdata 但好不容易装好额ReSharper又不见了
- javascript Windouw 转自 http://www.cnblogs.com/kissdodog/archive/2013/01/01/2841464.html
javascript之window对象 window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数. 1.全局的window对象 JavaScr ...
- SQL 字符串处理大全
select语句中只能使用sql函数对字段进行操作(链接sql server),select 字段1 from 表1 where 字段1.IndexOf("云")=1;这条语句不对 ...
- win10 自动亮度关闭无效问题
升级win10后,发现系统的关闭自动亮度功能无效了,怎么调整都没有效果,百度把,服务也关了,电源管理也关了,自己的显卡节电设置也关了,最后摸索,只要把电池状态下,和通电状态下的屏幕亮度都调整到50%以 ...
- java网络流传输，中文乱码问题。
最近需要从某个网页上抓取数据.一波三折. 1. 先要找到网站页面调用后台数据服务的url地址,但是本人对js不了解,花了不少时间在分析其网页源代码的js部分,试图寻找出调用数据的链接. 后来得知浏览器 ...
- Java画图程序设计
本文讲述一个画图板应用程序的设计,屏幕抓图如下: 『IShape』 这是所有图形类(此后称作模型类)都应该实现接口,外部的控制类,比如画图板类就通过这个接口跟模型类“交流”.名字开头的I表示它是一个接 ...
- RegExp对象
RegExp()构造函数带有两个字符串参数,其中第二个是可选的,如果提供第二个参数,它就指定正则表达式的修饰符.第一个函数包含正则表达式的主题部分,也就是正则表达式直接量中两条斜线之间的文本.无论是字 ...