資訊專欄INFORMATION COLUMN
摘要：我們還想要的顏色我們通過下面命令行可以做到觀察模式我們不想每一次項目變化都要手動編譯可以緩存兩次編譯之間沒有變化的模塊和輸出文件。開發服務器使用開發服務器開發體驗會更好這將在本地啟動一個端口的服務，指向靜態文件以及自動編譯。
原文英文版來自webpack官網
demo代碼
本文地址
這是一篇通過一個小例子給你介紹webpack的文章
你可以通過這篇文章了解到：
如何安裝webpack
如何使用webpack
如何使用裝載器(loaders)
如何使用開發服務器(development server)
安裝webpack你需要先安裝node.js。
$ npm install webpack -g
上面這句命令成功后，webpack命令行就可以使用了。
(如果你運行這句命令出錯，可以試試$ cnpm install webpack -g。cnpm需要安裝)
設置，編譯創建一個空文件夾。
在文件夾里先創建兩個文件entry.js，index.html
entry.js
document.write("webpack正常運行");
index.html
然后運行下面這句命令：
$ webpack ./entry.js bundle.js
這句命令行將會編譯你的js文件entry.js，并且會創建一個新的js文件bundle.js。
如果編譯成功，將會出現如下提示：
用瀏覽器打開index.html，你能看到webpack正常運行
下一步，我們在新的js文件里添加一些代碼。
content.js
module.exports = "content.js.正常工作";
修改entry.js
// document.write("webpack正常運行");
document.write(require("./content.js"));
再用下面的命令行編譯一下
$ webpack ./entry.js bundle.js
刷新你的瀏覽器，你可以看到文字content.js.正常工作
第一個加載器(loader)webpack將會分析你的入口文件(entry.js)與其他js文件的依賴關系。這些js文件（也可以成為模塊）也會被打包進bundle.js文件。webpack將會給每一個模塊一個唯一的ID，保存到bundle.js文件，通過唯一ID可以訪問到。只要入口模塊會在執行時被調用。（入口模塊再提到用其它他所依賴的模塊）。執行時，只提供必需的方法模塊，必要時才執行依賴，調用依賴模塊。 （恕我語言表達能力有點爛，有疑惑的朋友請移步看我另一篇文章webpack把你的項目編譯成了什么）
我們想在應用里加一個css文件。
webpack只能處理Javascript，所以我們需要css加載器(css-loader)去加載css文件。我們還需要樣式加載器(style-loader)把css文件應用到style標簽內。
運行npm install css-loader style-loader命令安裝這些加載器(loader)。(不需要安裝到全局，所以不要-g參數)。這個命令將會幫你創建一個node_modules文件夾，加載器都在這個文件夾里。
同樣也可以使用cnpm install css-loader style-loader。cnpm需要安裝)
繼續：
創建一個style.css文件
body {
background: yellow;
}
*修改 entry.js文件
//document.write("webpack正常運行");
require("!style!css!./style.css");
document.write(require("./content.js"));
重新編譯，然后刷新瀏覽器，可以看到頁面的背景色為黃色。
通過前置加載器去請求模塊，管道機制處理模塊。這些加載器在特定的方式中改變文件內容。這文件被處理后，最后變成一個JavaScript模塊。
綁定加載器
我們不想去寫很長的加載代碼require("!style!css!./style.css");。
我們可以把文件的后綴名綁定到加載器上，然后我們只需要寫：require("./style.css")。
修改entry.js文件
//document.write("webpack正常運行");
//require("!style!css!./style.css");
require("./style.css");
document.write(require("./content.js"));
運行下面的命令進行編譯：
webpack ./entry.js bundle.js --module-bind "css=style!css"
瀏覽器你能看到同樣的結果
我們可以把命令行里的參數移到配置文件里：
添加webpack.config.js文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
}
};
現在我們只需要運行：
webpack
去編譯
漂亮的輸出隨著該項目的增長，編譯可能需要更長的時間。所以我們要展示一些進度條。我們還想要的顏色…我們通過下面命令行可以做到：
webpack --progress --colors觀察模式
我們不想每一次項目變化都要手動編譯……
webpack --progress --colors --watch
webpack可以緩存兩次編譯之間沒有變化的模塊和輸出文件。
開發服務器當我們使用觀察模式進行編譯的時候。如果檢測到任何更改，webpack將再次運行編譯。如果檢測到某個文件沒有改變就啟用高速緩存，直接使那個模塊webpack緩存。
使用開發服務器開發體驗會更好
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
這將在本地啟動一個8080端口的服務，指向靜態文件index.html以及bundle.js(bundle自動編譯)。每當bundle.js重新自動編譯，會自動刷新瀏覽器（通過websocket機制）。打開瀏覽器 http://localhost:8080/webpack-dev-server/bundle
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111240.html
摘要：首先聲明一下，和兩者關系不大，主要是團隊之前一直用構建工具，這幾天業務上比較清閑，老大讓我學學新的和這些潮流工具，于是草草研究了一天，記一些筆記。最后使用將各個組件打包在一起。 首先聲明一下，gulp和webpack兩者關系不大，主要是團隊之前一直用grunt構建工具，這幾天業務上比較清閑，老大讓我學學新的gulp和webpack這些潮流工具，于是草草研究了一天，記一些筆記。 gulp...
摘要：最近得閑，想總結總結最近在學習上的一些心得，畢竟作為新手多寫多練好處多多，話不多說，馬上開始前端工程化為開發帶來了很多便利，但實際是，環境的配置也要大費周章一番。 最近得閑，想總結總結最近在學習Vue上的一些心得，畢竟作為新手多寫多練好處多多，話不多說，馬上開始！ 前端工程化為開發帶來了很多便利，但實際是，環境的配置也要大費周章一番。我用的是在Node環境下基于webpack來編譯打...
閱讀 1211·2023-04-26 02:20
閱讀 3337·2021-11-22 14:45
閱讀 4111·2021-11-17 09:33
閱讀 971·2021-09-06 15:00
閱讀 1479·2021-09-03 10:30
閱讀 3837·2021-07-26 22:01
閱讀 990·2019-08-30 15:54
閱讀 530·2019-08-30 15:43
