webpack to explore 探索-原创手记-慕课网

webpack

welcom
to learn

How to install webpack
How to use webpack
How to use loaders

How to use the development server
安装
首先保证安装了node.js

$ npm install webpack -g
//这将webpack命令生效

setup the compilation--安装编译
空目录开始，创建以下文件

//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 ./entry.js bundle.js
//编译文件并创建一个bundle文件
//正常则显示如下结果
Hash: ca188ee5789bb780fcec
Version: webpack 1.13.2
Time: 73ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 28 bytes {0} [built]

打开index.html,将显示It works
再加一个文件
添加content.js,并写入

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

更新entry.js

- document.write("It works.");
+ document.write(require("./content.js"));

编译

$ webpack ./entry.js bundle.js

刷新浏览器将看到 It works from content.js.

webpack将分析你的entry文件和其他文件的依赖。这些文件（所谓的modules）也将被你的bundle.js引入。webpack将给每一个模块一个唯一的id并在bundle.js文件中保持所有模块可访问。只有entry模块开始时被执行。一个小的运行时提供有require函数并且当required的时候执行。
首个加载者
我们想用一个css文件到app，webpack只能操作原生js，因此我们需要css-loader 去处理css文件。同时，我们也需要style-loader去应用styles在css文件中
运行npm install css-loader style-loader 以安装loader（他们需要局部安装，没有-g）。这将构建一个node——modules文件夹，这是loaders生存的地方
添加style.css并写入
body {
background: yellow;
}
更新entry.js

+ require("!style!css!./style.css");
  document.write(require("./content.js"));

编译并刷新浏览器将看到样式生效

By prefixing loaders to a module request, the module went through a loader pipeline. These loaders transform the file content in specific ways. After these transformations are applied, the result is a JavaScript module.
通过为loaders添加加载器，这些模块才能通过一个loader通道。这些loaders以特定方式转化文件内容。转换后就生成js模块。
绑定loaders
不想写那么长的requires——require("!style!css!./style.css")，我们可以绑定文件的扩展到loaders因此我们只需要这样写-——require("./style.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'
//效果同上

config文件
我们想移动确认选项到config文件，添加webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

如此，我们可以只运行

webpack

就编译

Hash: 5fe3ee0583ac412b5b0c
Version: webpack 1.13.2
Time: 856ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
   [0] ./entry.js 137 bytes {0} [built]
   [5] ./content.js 45 bytes {0} [built]
    + 4 hidden modules

在当前目录中，webpack命令行将加载webpack.config.js。
美化输出
如果项目的生成编译可能久一点，我们想展示一些进度条，我们想要颜色，这时我们可以通过以下命令实现。
webpack --progress --colors
监视模式
每次变动后，我们不想人为地去重编译，可以这样做。
webpack --progress --colors --watch
webpack会缓存未改变的模块并在编译间输出文件。

当应用监听模式，webpack为所有文件安装了文件监听器，用到编译进程中。任何变动被觉察，它将重新编译。当缓存正常，webpack将每个模块记忆性存储并当其不变时重用。
开发服务器----这样更好

npm install webpack-dev-server -g
webpack-dev-server --progress --colors

这将绑定一个小的express服务器到localhos:8080,服务你的静态资源文件以及bundle（自编译）。当重新编译包（SockJS）时，它会自动更新浏览器页面。在浏览器打开http://localhost:8080/webpack-dev-server/bundle 图片描述

webpack to explore 探索原创