前言：

　　　　知道这完儿，没用过。关于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. jdk 安装 环境变量配置

    右键选择 计算机→属性→高级系统设置→高级→环境变量 1.系统变量→新建 变量名:JAVA_HOME 变量值:(变量值填写你的jdk的安装目录,例如本人是 C:\Program Files\Java\ ...

  2. MyBatis日志配置

    关于MyBatis的日志,其实MyBatis已经弄得很好了,你甚至都不用配置,只要导入了jar包,MyBatis就会自动寻找. 具体步骤 1.导入jar包,就是把下载MyBatis时,lib里的包复制 ...

  3. asp.net core输出中文乱码的问题

    摘要 在学习asp.net core的时候,尝试在控制台,或者页面上输出中文,会出现乱码的问题. 问题重现 新建控制台和站点 public class Program { public static ...

  4. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  5. REDHAT一总复习1 ssh配置 禁用root用户SSH连接

    生成SSH公钥 $ ssh-keygen 生成的公钥安装到指定的服务器上,这里安装到desktop0上的student账户 $ ssh-copy-id desktop0 $ su - 禁用root用户 ...

  6. GridLayout 使用

    上次做了一个小键盘,请见:PopupWindow 使用. 效果是这样的: 可以看到,上面的按键是不一样大小的.因为是用LinearLayout布局,用的Button样式也是默认的.数字键和文字键的大小 ...

  7. （转）高效的将excel导入sqlserver中

    大部分人都知道用oledb来读取数据到dataset,但是读取之后怎么处理dataset就千奇百怪了.很多人通过循环来拼接sql,这样做不但容易出错而且效率低下,System.Data.SqlClie ...

  8. phpcms 表单提交发送邮件

    修改 phpcms\modules\formguide index.php 找到 foreach ($mails as $m) { sendmail($m, L('tips'), $this-> ...

  9. Java对象的深拷贝和浅拷贝、集合的交集并集

    http://blog.csdn.net/lian_1988/article/details/45970927 http://www.cnblogs.com/yxnchinahlj/archive/2 ...

  10. Ajax加载菊花loding效果

    Ajax 异步请求的时候,一般都会利用一个动态的 gif小图片来制作一个Ajax Loading ,以便增加用户体验. 这里我们使用Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外 ...