前言：

　　　　知道这完儿，没用过。关于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. 三种执行SQL语句的的JAVA代码

    问题描述: 连接数据库,执行SQL语句是必不可少的,下面给出了三种执行不通SQL语句的方法. 1.简单的Statement执行SQL语句.有SQL注入,一般不使用. public static voi ...

  3. python基础知识（三）

    摘要:主要涉及新数据类型set集合.三元运算.深浅拷贝.函数基础.全局变量与局部变量 一.set --> 无序,不允许重复的集合 不允许重复的列表,   1,创建    s = set() 接收 ...

  4. 【IOS】将字体大小不同的文字底部对齐

    从WP转IOS了,还是放不下...... 在项目中,要实现如图多个不同大小的文字   底部对齐的效果   像下面这样: (想要的效果) 以为用三个UIFont不同的UILabel  之后让他们底部对齐 ...

  5. Tomcat 知识点

    Tomcat(重点) Tomcat是一个符合于Java EE Web标准的最小web容器,所有的jsp程序一定需要有WEB容器的的支持才可以运行,而且在给定的WEB容器里面会支持事务处理操作. Tom ...

  6. python smtp 群发邮件

    最近工作中遇到使用脚本处理问题并发送结果邮件,使用python的smtp模块很简单的完成了实现.今天遇到一个问题,根据脚本的测试结果需要群发邮件,但是发送邮件的py文件只有首个地址收到了邮件.仔细排查 ...

  7. Autoit中用PrintWindow替代ScreenCapture函数实现截图

    想截取躲在后面的窗体或控件,找到了PrintWindow函数,幸运的是Autoit3也对此进行了封装以方便使用. 于是乎,将帮助文件里的_WinAPI_PrintWindow()实例改写了一下,以替代 ...

  8. RabbitMQ 集群安装过程详解

    一.安装Erlang 1.rabbitMQ是基于erlang的,所以首先必须配置erlang环境. 从erlang官网下载 otp 18.3.下载链接:http://erlang.org/downlo ...

  9. android 选择图片或拍照时旋转了90度问题

    由于前面的博文中忽略了点内容,所以在这里补上,下面内容就是解决拍照或者选择图片显示的时候图片旋转了90度或者其他度数问题,以便照片可以正面显示:具体如下: 首先直接看上面博文下的拍完照或者选完图后处理 ...

  10. Android Studio插件：PlantUML

    标记语言式的UML图编写工具,插件全名:PlantUML integration. 注意这个还要安装另一个软件:http://www.graphviz.org 并在PlantUML的设置中指定其路径. ...