摘要：中添加同樣起作用。說(shuō)明提供的命令，打包時(shí)模塊綁定的加載器為命令，監(jiān)聽打包的文件，只要改變自動(dòng)會(huì)打包命令窗口顯示打包進(jìn)度命令窗口列出引入的所有模塊命令窗口顯示打包引入模塊的原因

標(biāo)注：本筆記來(lái)自 imooc-qbaty老師-webpack深入與實(shí)戰(zhàn)
gitbash（or CMD）進(jìn)行命令操作

lenovo@lenovo-PC MINGW64 ~
$ cd /d/imooc/

lenovo@lenovo-PC MINGW64 /d/imooc
$ mkdir webpack-test

lenovo@lenovo-PC MINGW64 /d/imooc
$ cd webpack-test/

lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ npm init
# 一路回車初始化好npm...初始化完成會(huì)創(chuàng)建 package.json

# 安裝 webpack 作為開發(fā)依賴，安裝后會(huì)創(chuàng)建 node_modules 及在 package.json 中添加 webpack 配置
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ npm install webpack --save-dev
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ ls
node_modules/  package.json
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ atom ./

然后在 atom 中webpack-test目錄下創(chuàng)建 hello.js 代碼如下：

function hello(string) {
  alter(string);
}

# 打包 "hello.js", 事先全局安裝 webpack (npm install webpack -g)
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ webpack hello.js hello.bundle.js

打開 hello.bundle.js 代碼包括 webpack 所需的代碼和 hello.js 中的函數(shù)（最下方），注意函數(shù)上方的 /* 0 */, 代表模塊代號(hào)。

然后再在 atom 中 webpack-test 目錄下創(chuàng)建 word.js, 代碼如下：

function world() {
  return {};
}

hello.js 中最上方添加代碼：require("./world.js");// 引入 world.js;
重新打包 $ webpack hello.js hello.bundle.js , 再打開 hello.bundle.js 看一下下方加入了 world.js 代碼和模塊代號(hào) /* 1 */

上邊測(cè)試了 webpack 對(duì)js文件的引入，下邊再學(xué)習(xí)一下對(duì) css 文件處理：
atom 中 webpack-test 目錄下創(chuàng)建 style.css, 代碼如下：

html, body {
  padding: 0;
  margin: 0;
}
body {
  background: green;
}

css 文件需要 webpack loader 安裝如下：

lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ npm install css-loader style-loader --save-dev

atom 中 webpack-test 目錄下創(chuàng)建 index.html, 代碼如下：

引入css文件方法有兩種：

hello.js 中添加 require("style-loader!css-loader!./style.css");

重新打包 hello.js, 瀏覽器打開 index.html 會(huì)發(fā)現(xiàn)背景顏色變?yōu)榱薵reen，css起作用。

hello.js 中添加 require("./style.css");

gitbash: $ webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch 同樣css起作用。
說(shuō)明：

--module-bind "css=style-loader!css-loader" webpack 提供的命令，打包時(shí)模塊綁定css的加載器為 style-loader & .css-loader
--watch webpack命令，監(jiān)聽打包的 hello.js 文件，只要改變自動(dòng)會(huì)打包
--progress 命令窗口顯示打包進(jìn)度
--display-modules 命令窗口列出 hello.js 引入的所有模塊
--display-reasons 命令窗口顯示 打包引入模塊的原因