webpack使用教程

標籤：版本   意思   his   entry   自己   ima   ati   讀取   用途   

webpack使用教程接觸webpack也有挺長一段時間了，公司的項目也是一直用著webpack在打包處理，但前幾天在教新人的情況下，遇到了一個問題，那就是：儘管網上的webpack教程滿天飛，但是卻很難找到一個能讓新人快速入手的、接地氣的、傻瓜式的教程，自己手把手教又太浪費時間。想了一想，決定自己寫一篇webpack的傻瓜式教程，旨在教會尚未瞭解webpack的人迅速入手。 對於webpack的概念、用途、好處等等一律省略，想瞭解的上網搜尋即可，這裡直接示範如何建立一個webpack的執行個體。 1、安裝好nodejs，安裝過程網上找。 2、在D盤、E盤或任意一個磁碟中建立檔案夾，命名為webpack_demo： 3、在webpack_demo檔案下按住Shift鍵後點擊滑鼠右鍵，再左鍵點擊“在此處開啟命令列視窗”：在開啟的命令列視窗中鍵入：name表示項目名，version表示版本等等，不一一贅述了，看欄位很容易明白，一一填完或直接一路按斷行符號鍵，最後出現“is this ok？”時，敲擊斷行符號鍵後webpack_demo的檔案夾下便產生了package.json檔案。 4、在命令列中分別執行以下命令，安裝對應的外掛程式（--save-dev作用是安裝的外掛程式的同時，將外掛程式名寫入package.json的devDependencies列表中）：安裝完成後package.json的代碼如下（name、version、description等都是在npm init步驟中手動添加而成）：  5、此時查看webpack_demo檔案夾，會發現多出了一個檔案夾：雙擊開啟，檔案夾下的內容如下：說明所需要的外掛程式都已安裝成功。 6、在webpack_demo檔案下建立檔案webpack.config.js：編輯代碼如下：ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { 　　entry: ‘./js/main.js‘, 　　output: { 　　　　path: __dirname + ‘/dist‘new//載入器配置// { // test: /\.(png|jpg)$/,// loader: ‘url-loader?limit=8192‘// }以上代碼的意思是：引入extract-text-webpack-plugin這個外掛程式（用於支援打包css檔案，預設只支援打包js檔案），讀取目前的目錄下js檔案夾中的main.js（入口檔案）內容，把對應的js和css檔案打包，打包後的檔案放入目前的目錄的dist檔案夾下，打包後的css檔案命名為style.css，打包後的js檔案名稱為bundle.js。 7、webpack_demo下建立js檔案夾，裡面建立main.js，代碼編輯如下：require(‘./index/index.js‘); require(‘./index/index2.js‘); require(‘../css/index/index1.css‘); require(‘../css/index/index2.css‘); require(‘../css/common/public.css‘);以上代碼意思為：引入目前的目錄index檔案夾下的index.js，index2.js，引入上一層目錄css檔案夾下index檔案下的index1.css，index2.css和common檔案夾下的public.css。 8、建立上一步中對應路徑的css、js、index、common檔案夾，裡面分別建立對應的css或js檔案，每個css、js檔案裡寫入不同的代碼。8.2插一條：webpack.config.js檔案中這塊地區改成這樣：　module: {　　　　//載入器配置　　　　loaders: [　　　　　　{　　　　　　　　test: /\.css$/,　　　　　　　　loader:ExtractTextPlugin.extract("css-loader")　　　　　　} 　　　　]　　}9、視窗命令列中執行代碼：出現如下提示索命打包成功：此時開啟webpack_demo檔案夾，發現多了dist檔案夾，開啟，裡面檔案如下： 10、建立一個index.html檔案，只引入bundle.js和style.css：DOCTYPE html html ="en"><><charset titlewebpack教程title meta ="X-UA-Compatible"="IE=edge"/><name content link ="stylesheet"="text/css"="./dist/style.css"></><><></><srcscript body html雙擊用瀏覽器開啟這個html，會發現入口檔案main.js裡面引入的所有js和css檔案都已經執行了。 webpack -w 即時打封裝更新           

webpack使用教程