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 的简单使用的更多相关文章

  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的使用. 打开cmd(也可以用别的看个人爱好) 打开你要创建项目的文件夹: webpack安装: 1.全局安装webpack:$npm install webpack - ...

  6. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  7. webpack 4 简单介绍

    webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是 ...

  8. webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

    读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.to ...

  9. Node 使用webpack编写简单的前端应用

    编写目的 1. 使用 Node 依赖webpack.jQuery编写简单的前端应用. 操作步骤 (1)新建一个目录 $ mkdir simple-app-demo $ cd simple-app-de ...

随机推荐

  1. Thinkphp的单字母函数整理

    有人不太喜欢TP这种单字母函数,其实这也是TP的一个特色,如果理解了这些函数的作用,不管是背,还是写,都是非常方便的,接下来我们以字母顺序开始.A函数 B函数 C函数 D函数 F函数 L函数 R函数 ...

  2. Ninject之旅之一：理解DI

    摘要: DI(IoC)是当前软件架构设计中比较时髦的技术.DI(IoC)可以使代码耦合性更低,更容易维护,更容易测试.现在有很多开源的依赖反转的框架,Ninject是其中一个轻量级开源的.net DI ...

  3. php工作笔记7-概率算法

    a/m  b/m   c/m   d/m   10%    40%    20% a+b+c+d+... < = m array k   =  {a,b,c...} randt = rand(1 ...

  4. 8天掌握EF的Code First开发系列之3 管理数据库创建，填充种子数据以及LINQ操作详解

    本文出自8天掌握EF的Code First开发系列,经过自己的实践整理出来. 本篇目录 管理数据库创建 管理数据库连接 管理数据库初始化 填充种子数据 LINQ to Entities详解 什么是LI ...

  5. virtualbox ubuntu 网络连接 以及 连接 secureCRT

    参考http://luowei828.blog.163.com/blog/static/31031204201263125415257/ 用Host-Only 方案      ip: VirtualB ...

  6. 在 node.js 的 express web 框架中自动注册路由

    该方法主要是动态注册自己写的 router . 注册器 router 文件名为 loader.js  . var express = require('express'); var fs = requ ...

  7. VS2010项目的部署与安装

    VS2010项目的部署与安装 转自:http://www.cnblogs.com/smile-wei/archive/2012/07/06/2579607.html winform程序,我想进行安装. ...

  8. navigator对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 获取图片工具类：BitmapUtil

    package com.example.administrator.filemanager.utils;import android.content.Context;import android.gr ...

  10. FP 某段SQL语句执行时间超过1个小时，并报错：ORA-01652: 无法通过 128 (在表空间 TEMPSTG 中) 扩展

    一.出现如下两个错误:1.某一段SQL语句执行时间超过1个小时:2.一个小时后,提示如下错误:ORA-01652: 无法通过 128 (在表空间 TEMPSTG 中) 扩展 temp 段ORA-065 ...