学习笔记 一步步了解webpack

 

前言

demo 地址: https://github.com/yy8597/webpack-demos

之前学习了 broswerify，发现确实很好用。虽然没有 grunt 那样丰富的配置和插件，但就是觉得“恩！这就是我想要的结构”。
webpack 感觉就是 broswerify 的进阶版，怎么说呢：

  • 有更多可配置内容
  • 比起 broswerify 一股脑得打成单包更智能。

官方介绍

安装

npm install webpack -g

-g 方便我们在命令行直接使用 webpack

使用

基本命令 demo1

首先建立两个文件

//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

$ webpack ./entry.js bundle.js

生成 bundle.js，然后打开 index.html 就可以看到

It works.

添加依赖 demo2

增加一个文件

//content.js

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

我们修改 entry.js 加载 content.js 的内容

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

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

同样执行

$ webpack ./entry.js bundle.js

在浏览器中看到

It works from content.js.

done~

webpack 分析你的入口文件(entry.js)所依赖的其他文件（模块），这些文件都会被打包到 bundle.js中。webpack 会分配给每个模块一个唯一的 Id，在 bundle.js 中通过这个 Id 来访问每个模块。在程序启动的时候只会处理入口模块（entry.js）, require 方法会在执行时即时地处理依赖模块。

打包 css demo3

webpack 只能处理 javascript，要处理 css 就需要安装css-load来转换 css 为 js，还要安装style-loader 将转换后的 css 加载到 dom 中。

WHAT ARE LOADERS?

$npm install css-loader style-loader --save

接着增加 css 文件

body {

    background: yellow;

}

修改 entry.js，然后就能看到效果

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

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

同样执行

$ webpack ./entry.js bundle.js
It works from content.js.

通过 “!style!css!” 这样的前缀，可以把文件进行一系列的转化，最终变成 javascript 的一个模块。

命令行绑定 loaders

如果我们不想写过长的 require : require("!style!css!./style.css");，简化为require("./style.css")
或者我们喜欢灵活定制 css 文件的转化方式。

修改 entry.js

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

require("./style.css");

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

执行下面的命令：

$ webpack ./entry.js bundle.js --module-bind "css=style\!css"

官网说明在这有个错误，css=style\!css 里面少了个反斜杠，原因是叹号在 bash 里有特殊意义

It works from content.js.

添加 webpack.config.js demo4

理解了上面的 demo 以后，接下来我们就可以在项目根目录下新建一个webpack.config.js ，然后通过一句命令$ webpack就能打包我们的项目。

//webpack.config.js

module.exports = {

    entry: "./entry.js",

    output: {

        path: __dirname,

        filename: "bundle.js"

    },

    module: {

        loaders: [

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

        ]

    }

};

webpack 命令会尝试读取同目录中的 webpack.config.js 文件。

And More

还可以通过一些参数使得打包过程可视化

$ webpack --progress --colors

--progress 打印打包日志
--colors -c 带颜色的日志（官方是这么描述的，但我没看到颜色...）

当然还有 watch 功能

$ webpack --progress --colors --watch

必须的要有 server

$ npm install webpack-dev-server -g

$ webpack-dev-server --progress --colors

~ 完 ~

这里只是介绍了 webpack 基本的用法
demo 基本都是翻译自webpack/getting-started
更多详细和进阶的内容还是推荐去官网看看

参考

了解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. Java-UrlRewrite中文api文档

    安装 1. 下载jar包, 并加入到WEB-INF/lib下 2. 在WEB-INF/web.xml中增加下面的配置 <filter> <filter-name>UrlRewr ...

  2. 【第四篇章-android平台MediaCodec】推断是否支持硬件解码码

    public boolean isSupportMediaCodecHardDecoder(){ boolean isHardcode = false; //读取系统配置文件/system/etc/m ...

  3. SOHO路由器的静态路由的不同

    网络拓扑如下,其中RA与RB皆为TP-LINK家用路由器 最终在TP-LINK官网的官网上找到这么一段话 静态路由是在路由器中手工设置的固定的路由条目.我司路由器静态路由是基于ICMP重定向原理,与其 ...

  4. windows phone 使用相机并获取图片（3）

    原文:windows phone 使用相机并获取图片(3) 使用相机需要引用如下命名空间 " Margin="12,10,12,0" ></Image> ...

  5. 转载：PHP时间戳 strtotime()使用方法和技巧

    在php中我想要获取时间戳有多种方法,最常用的就是使用time函数与strtotime()函数把日期转换成时间戳了 获取指定的年月日转化为时间戳:pHP时间戳函数获取指定日期的unix时间戳 strt ...

  6. Windows Phone开发（19）：三维透视效果

    原文:Windows Phone开发(19):三维透视效果 三维效果也可以叫透视效果,所以,我干脆叫三维透视效果.理论知识少讲,直接用例开场吧,因为这个三维效果其实很简单,比上一节中的变换更省事,不信 ...

  7. ASP.Net 重写IHttpModule 来拦截 HttpApplication 实现HTML资源压缩和空白过滤

    务实直接上代码: 1. 重写FilterModule.cs using System; using System.Collections.Generic; using System.Linq; usi ...

  8. 选择排序java

    先简述选择排序,然后上代码 进行选择排序就是将所有的元素扫描一遍,从中挑选(或者说是选择,这正是这个排序名字的由来)最小的一个元素,将这个最小的元素与最左边的元素交换位置 ,现在最左边的元素就是有序的 ...

  9. C# The process cannot access the file because it is being used by another process

    C# The process cannot access the file because it is being used by another process   The process cann ...

  10. 《深入了解mybatis原则》 MyBatis架构设计和案例研究

    MyBatis这是现在很流行ORM框架,这是非常强大.事实上现却比較简单.优雅. 本文主要讲述MyBatis的架构设计思路,而且讨论MyBatis的几个核心部件.然后结合一个select查询实例.深入 ...