資訊專欄INFORMATION COLUMN
摘要：入門什么是官網(wǎng)介紹是一個模塊打包器。處理帶有依賴關系的模塊，生成一系列表示這些模塊的靜態(tài)資源。。我們在當前項目根目錄下新建一個文件，為命令配置選項。引入生成的在瀏覽器中打開。我們刷新頁面，可以發(fā)現(xiàn)頁面發(fā)生了變化。
webpack 入門 1. 什么是webpack
官網(wǎng)介紹：webpack是一個模塊打包器。webpack 處理帶有依賴關系的模塊，生成一系列表示這些模塊的靜態(tài)資源。(webpack is a module bundler.webpack takes modules with dependencies and generates static assets representing those modules.)。
webpack會把各種資源(js,png,css,less,等等)都作為模塊來使用和處理,最后轉(zhuǎn)化成一系列的靜態(tài)資源。
webpack都是怎么處理這些靜態(tài)資源的呢？
webpack提供了一系列的模塊加載器（loader）來編譯這些模塊。比如處理less文件，webpack提供了less-loader將less文件處理成css，然后再通過css-loader加載成css模塊，最后由style-loader加載器對其做最后的處理,等等。當然，你還可以定制自己的加載器處理自己的特需需求。
2. 為什么使用webpack對于單頁應用來說，隨著項目的發(fā)展，在一個頁面中的javascript代碼會越來越多，引入的js庫會越來越多，這時候就需要把javascript代碼模塊化，這樣才能便于管理和后期的維護。對于一個新項目來說,推薦使用Commonjs規(guī)范來編寫代碼，但是webpack為了兼容以前的舊代碼，又同時支持CMD和AMD規(guī)范。
對于使用react開發(fā)項目的團隊來說，webpack是必不可少的react開發(fā)神器。webpack中的react-hot-loader插件可以輕松實現(xiàn)react中模塊組件的熱替換，無刷新頁面就可以實時查看頁面所做的修改。有這樣的功能，誰還會拒絕使用webpack呢？
3. 使用webpacknpm install webpack -g
安裝成功后執(zhí)行webpack -V 命令行會輸出webpack的版本后和webpack全部的options（選項）。
我們在當前項目根目錄下新建一個webpack.config.js文件，為webpack命令配置選項。當然你還可以通過命令行的方式來配置，但是那樣太麻煩，每次執(zhí)行都要敲一大堆命令，想想沒人會這么干。
一個簡單的webpack配置如下所示:
var webpack = require("webpack");
var path = require("path");
module.exports = {
entry: "./src/main.js", //入口文件,webpack會從入口文件出開始查找依賴遞歸進行打包
output: {
path: path.join(__dirname, "www"), //打包后的文件位置
filename: "js/bundle.js", //打包后的文件名
},
module: {
loaders: [ //配置模塊加載器,數(shù)組形式
{ test: /.(js|jsx)$/, loaders: ["babel?presets[]=react,presets[]=es2015"] },//babel加載器用于將es6轉(zhuǎn)化成es5,使用前請先安裝babel-loader再引入加載器
],
}
};
在src下創(chuàng)建一個main.js作為入口文件：
在main.js寫入以下內(nèi)容:
document.write("study webpack!");
保存文件，在項目根目錄下執(zhí)行webpack命令后就會在www/js目錄下生產(chǎn)打包后的bundle.js文件
然后我們在www目錄下的index.html文件中直接用script標簽引入這個生成的bundle.js就ok了。
Title
在瀏覽器中打開index.html。
可以看到頁面出現(xiàn)了main.js中我們要打印的內(nèi)容：
webpack不僅提供了模塊打包功能,還為開發(fā)者提供了一個開發(fā)服務器,這個開發(fā)服務器會監(jiān)聽文件中的每一個改動,文件改動會觸發(fā)瀏覽器自動刷新頁面,實時查看自己代碼中的修改。執(zhí)行下面命令作為依賴安裝webpack-dev-server:
npm install webpack-dev-server --save-dev
在webpack.config.js同級目錄下,新建一個server.js,配置webpack-dev-server參數(shù)。為了使熱替換生效必須在以下三個位置配置信息：
在server.js中設置hot:true參數(shù)
在webpack.config.js的entry中加入"webpack/hot/dev-server
在webpack.config.js的plugins中加入HotModuleReplacementPlugin
具體配置信息如下：
server.js配置:
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config.js");
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true, //開啟熱調(diào)試
historyApiFallback: true
}).listen(3000, "127.0.0.1", function (err, result) {
if (err) {
console.log(err);
}
console.log("server start");
});
webpack.config.js也要做修改:
var path = require("path");
var webpack = require("webpack");
module.exports = (function( ) {
var config = {
entry: [
"webpack-dev-server/client?http://127.0.0.1:8000",
"webpack/hot/dev-server",
"./src/main.js"
],
output: {
path: path.join(__dirname, "www"),
filename: "js/bundle.js",
publicPath: "/www/"
},
module: {
loaders: [
],
}
};
config.plugins = [
new webpack.NoErrorsPlugin(), //允許錯誤不打斷程序
new webpack.HotModuleReplacementPlugin(), //webpack熱替換插件
];
return config;
})();
修改main.js中的內(nèi)容:
document.write("study webpack by webpack-dev-server);
修改過后執(zhí)行如下命令:
node server.js
當在命令行看到
webpack: bundle is now VALID.
說明打包成功。我們刷新頁面，可以發(fā)現(xiàn)頁面發(fā)生了變化。
并且控制臺出現(xiàn)了兩條語句
HMR前綴的信息由webpack/hot/dev-server模塊產(chǎn)生，WDS前綴的信息由webpack-dev-server客戶端產(chǎn)生。（Messages prefixed with [HMR] originate from the webpack/hot/dev-server module. Messages prefixed with [WDS] originate from the webpack-dev-server client.）
我們可以發(fā)現(xiàn)在www/js/目錄下并沒有產(chǎn)生bundle.js,因為通過webpack-dev-server打包出來的文件并沒有實質(zhì)性的生成存儲在磁盤中,而是生成保存在內(nèi)存中。每次執(zhí)行node server.js 太繁瑣,我們可以在package.json中為這條命令另起別名:
這樣我們每次只要執(zhí)行npm start就可以啟動webpack-dev-server了。
原文作者來自MaxLeap 團隊_cloud成員：zhiyingzzhou
原文鏈接：https://blog.maxleap.cn/archives/727
歡迎關注微信訂閱號：從移動到云端
歡迎加入我們的MaxLeap活動qq群：555973817，我們將不定期做技術分享活動。
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79423.html
摘要：本身也是運行在環(huán)境中的模塊，它通常會返回一個函數(shù)。這個命名規(guī)則和搜索優(yōu)先級順序在的中定義。那就等下一篇介紹吧，一篇文章有太多內(nèi)容，會讓人很乏的從入門到放棄四從入門到放棄二從入門到放棄三源代碼 此篇文章僅僅是整理自己接觸webpack的入門過程，可能有很多不正確的地方，希望大家諒解，并指出錯誤幫助改進。 對于webpack的介紹和前期對他的入門使用，我覺得官方（中文網(wǎng)）已經(jīng)介紹的很簡單了...
摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 本人微信公眾號：前端修煉之路，歡迎關注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學習過webpack。這兩天剛好有時間，學習了下...
摘要：離上一篇已經(jīng)一個星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發(fā)抒發(fā)情感。插件的使用一般是在的配置信息選項中指定。本身內(nèi)置了一些常用的插件，還可以通過安裝第三方插件。從入門到放棄四從入門到放棄二從入門到放棄一源代碼 離上一篇已經(jīng)一個星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發(fā)抒發(fā)情感。上一篇簡單介紹了webpack的配置，這里稍微再做一一下延伸 插件 插件可以完成更多 ...
摘要：實踐筆記入門一官網(wǎng)文檔地址實踐工程地址本篇文章可切換到分支查看源代碼。簡單分步實踐創(chuàng)建一個空文件夾，進入全局安裝創(chuàng)建文件創(chuàng)建執(zhí)行命令這個時候項目中多了一個文件，使用標簽將其引入到中在瀏覽器中打開文件，頁面出現(xiàn)文字。 webpack 實踐筆記入門（一） [webpack官網(wǎng)文檔地址]:（http://webpack.github.io/docs...） [實踐工程地址]: (https:...
摘要：我們可以根據(jù)模塊類型擴展名來自動綁定需要的。當需要加載的文件匹配的正則時，就會調(diào)用后面的對文件進行處理，這正是強大的原因。這篇就這樣吧，感覺進度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...
摘要：我們可以根據(jù)模塊類型擴展名來自動綁定需要的。當需要加載的文件匹配的正則時，就會調(diào)用后面的對文件進行處理，這正是強大的原因。這篇就這樣吧，感覺進度有點慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點升華。 First Step 我們給第一篇例子中加個...
閱讀 2590·2019-08-30 10:53
閱讀 3192·2019-08-29 16:20
閱讀 2948·2019-08-29 15:35
閱讀 1770·2019-08-29 12:24
閱讀 2878·2019-08-28 18:19
閱讀 1854·2019-08-23 18:07
閱讀 2335·2019-08-23 15:31
閱讀 1169·2019-08-23 14:05
