这是一个非常简单的例子，通过这个例子你将学习到

1、How to install webpack

2、How to use webpack

3、How to use loaders

4、How to use the development server

使用node安装

$ npm install webpack -g

创建一个entry.js

document.write("It works.");

添加index.html

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

    </body>

</html>

然后

$ webpack ./entry.js bundle.js

它将会编译文件并创建一个bundle.js文件

接下来我们创建第二个文件content.js

module.exports = "It works from content.js.";

更新entry.js

- document.write("It works.");

+ document.write(require("./content.js"));

然后再次编译

$ webpack ./entry.js bundle.js

第一个loader

webpack只能处理JavaScript本身，所以我们需要css-loader来处理css

npm install css-loader style-loader

执行完之后会创建一个node_modules 文件

然后我们创建一个style.css

body {

    background: yellow;

}

更新entry.js

+ require("!style!css!./style.css");

  document.write(require("./content.js"));

然后编译，刷新浏览器，看背景颜色是否为yellow

一个配置文件webpack.config.js

module.exports = {

    entry: "./entry.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

            { test: /\.css$/, loader: "style!css" }

        ]

    }

};

这时候只要运行

webpack

如果项目编译时，可能需要一段时间，这时候可以显示进度条和颜色

webpack --progress --colors

我们不想每次修改后手动编译

webpack --progress --colors --watch

开发服务器

npm install webpack-dev-server -g

然后运行

webpack-dev-server --progress --colors 

访问 http://localhost:8080/　　　　

　

WEBPACK开始的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. JSPatch 实现原理详解

    原文地址https://github.com/bang590/JSPatch/wiki/JSPatch-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86%E8%AF%A6%E8 ...

  3. 第一个Struts2程序之HelloWorld

    1.Struts2 简介 Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2的体系结构与St ...

  4. Google副总裁的管理经验

    一.拥挤其实是创新.拥挤喧闹的工作环境会引燃更多的创意火花.办公室应该充满能量和互动,而不是条块分割和等级分化. 二.战略和策略并举.许多人不懂得战略和策略的区别,或者他们认为自己只需要其中一样,其实 ...

  5. save_data

    <?php /** * * $model 实例化表模型 * * $url 跳转地址 */ public function save_data($model,$url){ if(false === ...

  6. VS中的路径宏 vc++中OutDir、ProjectDir、SolutionDir各种路径

    原文链接:http://www.cnblogs.com/lidabo/archive/2012/05/29/2524170.html 说明 $(RemoteMachine) 设置为“调试”属性页上“远 ...

  7. 使用jQuery+PHP+Mysql实现抽奖程序

    抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+Mysql实现类似电视中常见的一个简单的抽奖程序. 查看演示 本例中的抽奖程序要 ...

  8. vlc 在ie11 中的addEventListener事件不触发

    在vlc控件中触发一事件,在IE11之前的版本使用attachEvent注册一个回调函数后IE11可以捕获到事件,但IE11中提示attachEvent不支持.经查询发现IE11已经去掉了attach ...

  9. MyBatis入门学习教程-调用存储过程

    一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 create table p_user( id int primary key auto_incr ...

  10. SOA 面向服务的体系结构

    SOA:面向服务的体系结构(service-oriented architecture) 是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来. 接口是采 ...