前言

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. webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

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

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

  3. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  4. Webpack4 学习笔记一初探Webpack

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 打包文件 支持JS模块化 模式: production(0配置默认), development(生产环境) 更详细的 ...

  5. 更博不能忘——webpack学习笔记

    webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...

  6. VueJs 学习笔记

    VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库)  VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...

  7. WeX5学习笔记

    目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计 ...

  8. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  9. RAC学习笔记

    RAC学习笔记 ReactiveCocoa(简称为RAC),是由Github开源的一个应用于iOS和OS开发的新框架,Cocoa是苹果整套框架的简称,因此很多苹果框架喜欢以Cocoa结尾. 在学习Re ...

随机推荐

  1. vim ctl+v批量添加/删除

    vim编辑器---批量注释与反注释 在使用vim编写代码的时候,经常需要用到批量注释与反注释一段代码.下面简要介绍其操作. 方法一 块选择模式 插入注释: 用v进入virtual模式 用上下键选中需要 ...

  2. FZUOJ Problem 2178 礼品配送

    Problem 2178 礼物分配 题目链接: Click Here~ Problem Description 在双胞胎兄弟Eric与R.W的生日会上,他们共收到了N个礼物,生日过后他们决定分配这N个 ...

  3. bellman_ford寻找平均权值最小的回路

    给定一个有向图,如果存在平均值最小的回路,输出平均值. 使用二分法求解,对于一个猜测值mid,判断是否存在平均值小于mid的回路 如果存在平均值小于mid的包含k条边的回路,那么有w1+w2+w3+. ...

  4. Form表单中的action路径问题

    今天刚接触web,在用jsp和servlet做一个简单的登陆的时候在Form表单action属性和method属性的一些问题:  我遇到的是Form表单提交到servelet处理时遇到的问题:  (1 ...

  5. MySQL Windows ZIP 免费安装和启动设置

    MySQL Windows ZIP免安装版,设置和启动的过程事实上挺麻烦的.以下一步一步介绍使用的过程: 1.下载Windows (x86, 64-bit), ZIP Archive: 2.解压zip ...

  6. [Elasticsearch] 控制相关性 (一) - 后面的相关度分值理论计算

    从第一章翻译Elasticsearch官方指南Controlling Relevance一章. 控制相关度(Controlling Relevance) 对于仅处理结构化数据(比方日期.数值和字符枚举 ...

  7. HDU4960Another OCD Patient（间隙dp,后座DP）

    Another OCD Patient Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Ot ...

  8. HDU 3681 BFS&amp;像缩进DP&amp;二分法

    N*M矩阵.从F出发点.走完全部Y点.每个人格开支1电源点,去G点,电池充满,D无法访问.最小的开始问什么时候满负荷可以去完全部Y.Y和G总共高达15一 第一BFS所有的F.Y.G之间的最短距离. 然 ...

  9. 重新想象 Windows 8 Store Apps (33) - 关联启动: 使用外部程序打开一个文件或uri, 关联指定的文件类型或协议

    原文:重新想象 Windows 8 Store Apps (33) - 关联启动: 使用外部程序打开一个文件或uri, 关联指定的文件类型或协议 [源码下载] 重新想象 Windows 8 Store ...

  10. 复制360于Launcher浮动窗口的屏幕显示内存使用情况(基本版)

    MainActivity如下面: package cc.cc; import android.os.Bundle; import android.view.View; import android.v ...