Webpack
什麼是webpack：現今的很多網頁其實可以看做是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區湧現出了很多好的實踐方法：1、模塊化，2、css預處理器等，通過這些改進大大提高了我們的開發效率，但是利用它們開發的文件往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就爲WebPack類的工具的出現提供了需求。安裝webpack：
- 可以使用npm安裝。
在終端中轉到該文件夾後執行下述指令就可以完成安裝。（cmd）
npm install -g webpack//全局安裝 //安裝到你的項目目錄 npm install --save-dev webpack
使用webpack
- 先在本地新建一個空的文件夾（此處命名爲webpack）;
在上述文件夾下創建package.json文件，可以使用npm init命令自動創建 這個package.json文件
npm init執行完這個命令後回車默認。
文件夾的目錄如下
——app ——node_modules ——public ——package.json ——webpack.config.jsindex.html放在public文件夾下；
main.js 放在app文件夾下。package.json文件就緒，我們在繼續安裝Webpack作爲依賴包，輸入：
npm install --save-dev webpack執行webpack -v 看是否安裝好了webpack，
相關模塊裏的測試代碼
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Test</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html> // main.js var greet = document.createElement('div'); greet.innerHTML = "Hello World!"; document.querySelector("#root").appendChild(greet);在終端使用webpack（在命令行運行下面語句）
# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑， # {destination for bundled file}處填寫打包文件的存放路徑 # 填寫路徑的時候不用添加{} webpack {entry file} {destination for bundled file} # webpack非全局安裝的情況 node_modules/.bin/webpack app/main.js public/bundle.js查看效果打開index.html文件即可。
通過配置文件來使用webpack
在剛纔的文件夾的根目錄下建立一個webpack.config.js文件，代碼如下module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包後的文件存放的地方 filename: "bundle.js"//打包後輸出文件的文件名 } }在終端運行webpack即可(非全局安裝需使用node_modules/.bin/webpack)。webpack的配置文件最基本的就是入口及輸出口的配置。
更快捷的執行打包任務
在package.json文件的script屬性的start鍵的值寫爲“ webpack”，我們以後便可在終端直接執行npm start
總結
現在的webpack4版本，已經將webpack的一些工具包歸入webpack-cli中，所以我們還得安裝webpack-cli，npm install webpack-cli。全局下安裝則加一個 -g 。
以上，便實現了一個簡單的webpack打包，webpack更強大的功能如source map 使調試更加容易、構建本地webpack服務器、loaders、babel等，請具體查看一位大牛的文章：http://www.jianshu.com/p/42e11515c10f
webpack安裝及使用
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章