webpack深刻與實戰筆記（20171015待續...）

時間 2019-11-05

標籤 webpack 深刻實戰筆記待續简体版

原文原文鏈接

標註：本筆記來自 imooc-qbaty老師-webpack深刻與實戰
gitbash（or CMD）進行命令操做css

1、準備工做

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...初始化完成會建立 package.json

# 安裝 webpack 做爲開發依賴，安裝後會建立 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 ./

2、webpack對js文件處理

而後在 atom 中webpack-test目錄下建立 hello.js 代碼以下：html

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 中的函數（最下方），注意函數上方的 /* 0 */, 表明模塊代號。node

而後再在 atom 中 webpack-test 目錄下建立 word.js, 代碼以下：webpack

function world() {
  return {};
}

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

3、webpack 對css文件的處理

上邊測試了 webpack 對js文件的引入，下邊再學習一下對 css 文件處理：
atom 中 webpack-test 目錄下建立 style.css, 代碼以下：web

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

css 文件須要 webpack loader 安裝以下：npm

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

atom 中 webpack-test 目錄下建立 index.html, 代碼以下：json

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>webpack-test</title>
  </head>
  <body>

    <script src="hello.bundle.js"></script>
  </body>
</html>

引入css文件方法有兩種：瀏覽器

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

從新打包 hello.js, 瀏覽器打開 index.html 會發現背景顏色變爲了green，css起做用。bash

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

gitbash: $ webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 一樣css起做用。
說明：

--module-bind 'css=style-loader!css-loader' webpack 提供的命令，打包時模塊綁定css的加載器爲 style-loader & .css-loader
--watch webpack命令，監聽打包的 hello.js 文件，只要改變自動會打包
--progress 命令窗口顯示打包進度
--display-modules 命令窗口列出 hello.js 引入的全部模塊
--display-reasons 命令窗口顯示打包引入模塊的緣由

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。