前言：

　　　　知道这完儿，没用过。关于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. centos环境搭建

    1.php -v 与phpinfo();    不符,查看centos是否有自带的php:更改centos环境变量 /etc/profile,source /etc/profile生效: 2.pecl ...

  2. mac显示隐藏文件

    苹果Mac OS X操作系统下,隐藏文件是否显示有很多种设置方法,最简单的要算在Mac终端输入命令. 显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 第一种 显示Mac隐藏文件的命 ...

  3. vmware workstation安装 Mosrosoft Runtime DLL安装程序未能完成安装

    不要点确定.开始菜单运行输入'%temp%',在弹出的窗体中找到一个文件名中含'{132E3257-14F1-411A-BC6C-0CA32D3A9BC6}~setup'(不一定一样,反正就是第一行的 ...

  4. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  5. WinForm与WPF下跨线程调用控件

    Winform下: public delegate void UpadataTextCallBack(string str,TextBox text); public void UpadtaText( ...

  6. SQL Server群集如何在线检测

    SQL Server群集知识介绍 Windows群集安装 基于iSCSI的SQL Server 2012群集测试 前言 群集的检测是调用dll资源,例如对于共享存储,ip,网络名称与DTC 这类Win ...

  7. REDHAT一总复习1 记录systemd日志条目 rsyslogd配置记录日志指令

    显示9:05:00 到9:15:00 之间在/home/student/systemdreview.txt 文件中记录所有systemd日志条目 # echo "journalctl --s ...

  8. 函数式 js 接口实现原理，以及 lodash/fp 模块

    函数式 js 接口 之前在 youtube 上看到一个技术视频,讲“underscore.js的接口为什么不好用”,以及什么样的接口更好用.演讲者是 lodash.js 的作者,他提出了一种“全面函数 ...

  9. jq 个性的隔行变色

      效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...

  10. runtime第二部分成员变量和属性

    接上一篇 http://www.cnblogs.com/ddavidXu/p/5912306.html 转载来源http://www.jianshu.com/p/6b905584f536 http:/ ...