Webpack的入門

02-25

個人前兩天在菜鳥教程上學習了webpack的入門，做了記錄，如下

如果看不懂或者說我寫的不對，請瀏覽

菜鳥教程www.runoob.com

Webpack 入門教程 | 菜鳥教程www.runoob.com

webpack安裝以及使用（3.0）

1.安裝淘寶鏡像（因為快-->在控制台輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安裝webpack

cnpm install webpack -g （-g 是全局安裝）

3.創建目錄APP

mkdir app

4.在目錄下添加文件（這裡是打開文件夾新建）

index.html

<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body></html>

javascript.js

document.write("It works.");

5.使用命令打包

webpack javascript.js script.js

——————————————————————————————————————

6.再創建一個js文件

Javascript2.js

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

javascript.js的文件更新

document.write(repeire(「./javascript2.js」))

7．使用命令打包

webpack javascript.js script.js

LOADER

Webpack 本身只能處理JavaScript模塊，處理其它類型，需要使用loader進行轉換

例如css 就需要使用到css-loader 和 style-loader

他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然後找到 url() 表達式然後處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標籤中。

8.安裝 css 的loader

cnpm install css-loader style-loader

9.創建一個css 文件

style.css

body{ background:yellow}

修改更新javascript.js文件

require（「！style.loader!css-loader!./style.css」）;document.write(require(「./javascript2.js」));

10.使用命令打包

webpack javascript.js script.js

11. require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!，當然我們可以根據模塊類型（擴展名）來自動綁定需要的 loader。將 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ：

javascript.js

require(「./style.css」)document.write(require(「./script.js」));

12.使用命令打包

webpack javascript.js script.js –module-bind 『css=style-loader!css-loader』

13.配置文件

我們可以將一些編譯選項放在配置文件中，以便於統一管理：

創建webpack.config.js 文件

webpack.config.js

module.exports = { entry:」./javascy」, output:{ path:__dirname, filename:」script.js」 }, module:{ loalders:[ { test:/.css$/,loader:」style-loader!css-loader」 } ] }};

14.使用命令打包

webpack

____________________________________________________________________________________________

15.插件

插件在 webpack 的配置信息 plugins 選項中指定，用於完成一些 loader 不能完成的工。

webpack 自帶一些插件，你可以通過 cnpm 安裝一些插件。

使用內置插件需要通過以下命令來安裝:

cnpm install webpack –save-dev

例如安裝內置的 BannerPlugin 插件，用於在文件頭部輸出一些注釋信息。

修改webpack.config.js

var webpack=requlre(『webpack』);module.exports={entry:」javascript.js」,output:{path:__dirname,filename:」script.js」},module:{loaders:[{ test:/.css$/,loader:」style-loader!css-loader」 }]},plugins:[new webpack.BannerPlugin(『個人記錄webpack 實例』)]};

16.使用命令打包運行

webpack

17.開發環境

當項目文件變大時，webpack編譯時間會變長，可以通過參數讓編譯的輸出內容帶有進度和顏色

webpack --progress –colors

不想每次修改後都重新編譯，可以啟動監聽模式，自動編譯修改過的文件

webpack--watch

安裝webpack-dev-server 啟動一個服務埠，並通過http://socket.io監聽webpack

安裝

cnpm install webpack-dev-server -g

運行

webpack-dev-server --progress --colors