WEBPACK 入门
webpack 入門
1. 什么是webpack
官網介紹：webpack是一個模塊打包器。webpack 處理帶有依賴關系的模塊，生成一系列表示這些模塊的靜態資源。(webpack is a module bundler.webpack takes modules with dependencies and generates static assets representing those modules.)。
webpack會把各種資源(js,png,css,less,等等)都作為模塊來使用和處理,最后轉化成一系列的靜態資源。
webpack都是怎么處理這些靜態資源的呢？
webpack提供了一系列的模塊加載器（loader）來編譯這些模塊。比如處理less文件，webpack提供了less-loader將less文件處理成css，然后再通過css-loader加載成css模塊，最后由style-loader加載器對其做最后的處理,等等。當然，你還可以定制自己的加載器處理自己的特需需求。
2. 為什么使用webpack
對于單頁應用來說，隨著項目的發展，在一個頁面中的javascript代碼會越來越多，引入的js庫會越來越多，這時候就需要把javascript代碼模塊化，這樣才能便于管理和后期的維護。對于一個新項目來說,推薦使用Commonjs規范來編寫代碼，但是webpack為了兼容以前的舊代碼，又同時支持CMD和AMD規范。
對于使用react開發項目的團隊來說，webpack是必不可少的react開發神器。webpack中的react-hot-loader插件可以輕松實現react中模塊組件的熱替換，無刷新頁面就可以實時查看頁面所做的修改。有這樣的功能，誰還會拒絕使用webpack呢？
3. 使用webpack
npm install webpack -g安裝成功后執行webpack -V 命令行會輸出webpack的版本后和webpack全部的options（選項）。
我們在當前項目根目錄下新建一個webpack.config.js文件，為webpack命令配置選項。當然你還可以通過命令行的方式來配置，但是那樣太麻煩，每次執行都要敲一大堆命令，想想沒人會這么干。
一個簡單的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: [ //配置模塊加載器,數組形式{ test: /\.(js|jsx)$/, loaders: ['babel?presets[]=react,presets[]=es2015'] },//babel加載器用于將es6轉化成es5,使用前請先安裝babel-loader再引入加載器],}};在src下創建一個main.js作為入口文件：
在main.js寫入以下內容:
document.write('study webpack!');保存文件，在項目根目錄下執行webpack命令后就會在www/js目錄下生產打包后的bundle.js文件
然后我們在www目錄下的index.html文件中直接用script標簽引入這個生成的bundle.js就ok了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--引入生成的bundle.js--> <script type="text/javascript" src="./js/bundle.js"></script> </body> </html>在瀏覽器中打開index.html。
可以看到頁面出現了main.js中我們要打印的內容：
4. 安裝webpack開發服務器(webpackd-dev-server)
webpack不僅提供了模塊打包功能,還為開發者提供了一個開發服務器,這個開發服務器會監聽文件中的每一個改動,文件改動會觸發瀏覽器自動刷新頁面,實時查看自己代碼中的修改。執行下面命令作為依賴安裝webpack-dev-server:
npm install webpack-dev-server --save-dev在webpack.config.js同級目錄下,新建一個server.js,配置webpack-dev-server參數。為了使熱替換生效必須在以下三個位置配置信息：
在server.js中設置hot:true參數
在webpack.config.js的entry中加入'webpack/hot/dev-server
在webpack.config.js的plugins中加入HotModuleReplacementPlugin
具體配置信息如下：
server.js配置:
webpack.config.js也要做修改:
修改main.js中的內容:
document.write('study webpack by webpack-dev-server);修改過后執行如下命令:
node server.js當在命令行看到
webpack: bundle is now VALID.
說明打包成功。我們刷新頁面，可以發現頁面發生了變化。
并且控制臺出現了兩條語句
HMR前綴的信息由webpack/hot/dev-server模塊產生，WDS前綴的信息由webpack-dev-server客戶端產生。（Messages prefixed with [HMR] originate from the webpack/hot/dev-server module. Messages prefixed with [WDS] originate from the webpack-dev-server client.）
我們可以發現在www/js/目錄下并沒有產生bundle.js,因為通過webpack-dev-server打包出來的文件并沒有實質性的生成存儲在磁盤中,而是生成保存在內存中。每次執行node server.js 太繁瑣,我們可以在package.json中為這條命令另起別名:
這樣我們每次只要執行npm start就可以啟動webpack-dev-server了。
原文作者來自MaxLeap 團隊_cloud成員：zhiyingzzhou
原文鏈接：https://blog.maxleap.cn/archives/727
歡迎關注微信訂閱號：從移動到云端
歡迎加入我們的MaxLeap活動qq群：555973817，我們將不定期做技術分享活動。
總結
以上是生活随笔為你收集整理的WEBPACK 入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在CMD窗口中使用javac和java命
- 下一篇： 练习： C#---函数（篮球弹起高度、等