前言：

　　　　知道这完儿，没用过。关于webpack有很多介绍了，就不多说了。放几个链接，方便新手理解。这是给纯没用过的人了解的。这里只是简单介绍一下webpack的基本用法。大多内容都是来自webpack/getting-started，外加一些自己的理解。

　　　　官方介绍　　

[译] 用 Webpack 武装自己

安装 webpack:

　 You need to have node.js installed.

$ npm install webpack -g

　 eg 1:

　 新建文件：

　entry.js

document.write("It works.");

　index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>SETUP THE COMPILATION</title>

</head>

<body>

    <script type="text/javascript" src="bundle.js"></script>

</body>

</html>

　运行：

$ webpack ./entry.js bundle.js

如果成功，会这样：


在编辑器里会自动生成一个bundle.js



在浏览器打开index.html，会显示 It works.

　 eg 2:

　下一步，我们将代码依赖到另一个文件：

添加 content.js

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

　更新 entry.js

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

　

　运行 $ webpack ./entry.js bundle.js

　 浏览器将输出：It works from content.js.

webpack 会分析你的入口文件是否依赖其他文件。如果有，这些文件（模块）同样会打包到 bundle.js中。webpack会给每个模块分配给唯一的ID，通过ID来访问这个模块。

　 eg 3:

　 添加CSS样式到我们的应用中。打包CSS。

　 webpack只能处理JavaScript 本身，所以我们需要 css-loader 去处理css文件，我们还需要用style-loader 将转换后的css加载到dom中。

$npm install css-loader style-loader

　　Run npm install css-loader style-loader to install the loaders. (They need to be installed locally, without -g) This will create anode_modules folder for you, in which the loaders will live.

看这意思是，要把这个加载的node_modules加载到本地。

　 接着，创建个style.css文件

body{

    background-color: yellow;

    font-family: 'Franklin Gothic Medium', 'Arial Narrow';

}

　更新我们的 entry.js文件

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

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

　执行

$ webpack ./entry.js bundle.js

　再次打开你的index.html：

　　

如果我们不想写过长require，可以这样 在 entry.js里

require(“!style!css!./style.css”);，简化为require(“./style.css”)。

　  执行：

webpack ./entry.js bundle.js --module-bind 'css=style!css'

“Some environments may require double quotes: –module-bind “css=style!css” “

一些环境下可能需要双引号。　

当然，在浏览器中你会看到相同的效果。

eg 4:

添加webpack.config.js.

module.exports = {

    entry : "./entry.js",

    output:{

        path:__dirname,

        filename:"bundle.js"

    },

    module:{

        loaders:[

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

        ]

    }

};

现在，运行：

webpack

webpack 命令将尝试加载目录中的webpack.config.js文件。

以上。

肯定会有理解不到的地方。这只是webpack的基本用法。更多的需要各位道友一同探索了。~~

demo：https://github.com/miloers/webpack_demo

 

　

　　

　　　　

webpack初试的更多相关文章

  1. react+babel+webpack初试

    在上一篇,我们简单学习了webpack学习,现在这里我们简单学习一下react+babel+webpack,进行编译react语法jsx以及结合es6写法. 这里我就简单的直接上demo: packa ...

  2. 初试webpack打包

    第一次接触webpack,学习了如何用webpack打包,记录一下过程. 1.在项目根目录安装webpack $ npm install webpack --save-dev 2.新建一个webpac ...

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

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

  4. webpack之傻瓜式教程

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

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

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

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

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

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

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

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

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

  9. webpack的使用

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

随机推荐

  1. 原生JS会跳动的电子表

     一个会跳动的电子表,源码--time.html  图片--img github地址:https://github.com/1056237661/practiceCode <!DOCTYPE h ...

  2. Linux常用命令和Shell编程基础

    目录相关 cd - .与.. 分别表示当前目录和父目录 - ~与$HOME 都是指当前用户的主目录 - cd – 切换到上一次所在的目录(不一定是父目录) pwd - pwd 显示当前目录 - $PW ...

  3. NSSearchPathForDirectoriesInDomains函数详解

    NSSearchPathForDirectoriesInDomains函数详解     #import "NSString+FilePath.h" @implementation ...

  4. JavaScript - 正则表达之二

    正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词默 ...

  5. Linux PXE无盘工作站

    • 关于PXE无盘工作站系统的简介 PXE无盘工作站系统是指由一台或多台“系统服务器”和多台“PXE客户端(无盘工作站)”通过 交换机 相连组成的局域网系统. (图1:无盘工作站系统部署拓扑图) • ...

  6. Appcan——Box

    Box架构 ub….. Box架构元素空间大小分配比例 ub-f……. Ub-f1,ub-f2,ub-f3……. Box架构元素垂直方向的位置排列 ub-ac,ub-ae… -webkit-box-a ...

  7. python 调用dll中c或c++语言的带指针方法，

    在项目开发中遇到了,python需要去调用一个动态链接库dll中的c++方法.这个方法的参数为一个指针类型的参数,一个bool类型参数, 在python中并未对数字类型进行区分. int LP_Agc ...

  8. spring mvc controller间跳转 重定向 传参

    http://blog.csdn.net/jackpk/article/details/19121777/

  9. apache如何解决跨域资源访问

    很多时候,大中型网站为了静态资源分布式部署,加快访问速度,减轻主站压力,会把静态资源(例如字体文件.图片等)放在独立服务器或者CDN上,并且使用独立的资源域名(例如res.test.com) 但是在实 ...

  10. 001_SPL工作中总结

    一.SPL字段搜索中value带双引号和不带双引号的区别 如:iis.cs_uri_stem:\/api\/Purchase\/Common\/* AND logtype:iis 和iis.cs_ur ...