webpack構建工具快速上手指南
最近在研究react項目，接觸到webpack打包工具。剛接觸的時候一臉茫然，經過最近的學習，下面我來帶大家開啟webpack入門之旅。
webpack是什麽
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、樣式（含less/sass）、圖片等都作為模塊來使用和處理。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成少量的 bundle - 通常只有一個，由瀏覽器加載。 當然做react項目也可以不用webpack構建工具，可以用gulp或者grunt等構建工具，但是GitHub 上面rect相關項目都是用webpack來構建的，官方推薦也是webpack更為合適，所以我們沒有理由不掌握它。
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的入口文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包為一個瀏覽器可識別的JavaScript文件。
webpack 的優勢
-
在webpack看來一切都是模塊，包括javascript、css以及圖片等。
-
開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等。。
-
擴展性強，插件機制完善。
webpack文件配置
webpack有四個核心概念：入口(entry)、輸出(output)、加載器（loader）、插件(plugins)。下面來看一下webpack.config.js文件
const webpack = require(‘webpack‘);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘); //css單獨打包插件 module.exports = { //頁面入口文件 entry: { app: ‘./src/app‘ }, //打包文件輸出配置 output: { path: ‘dist/js‘,//打包輸出路徑 filename: ‘[name].min.js‘,//文件名字 }, //自動擴展文件後綴名，意味著我們在項目中import模塊可以省略不寫後綴名resolve: { extensions: [‘.js‘, ‘.jsx‘] }, //模塊加載器（圖片／js/css/等等） module: { rules: [{ test: /\.(js|jsx)$/, exclude: /^node_modules$/, use: [{ loader: ‘babel-loader‘, options: { presets: [‘es2015‘, ‘react‘], plugins: ["transform-object-rest-spread"] } }] },{ test: /\.less$/, exclude: /^node_modules$/, loader: ExtractTextPlugin.extract({ fallback: ‘style-loader‘, use: ‘css-loader!less-loader‘ }) }, { test: /\.(png|jpg|gif)$/, exclude: /^node_modules$/, include: path.resolve(__dirname, ‘./img‘), loader: ‘url-loader‘, options: { limit: 8192 //圖片文件小於8kb的直接轉為base64 } }] }, //插件項（這裏用裏一個css單獨打包，否則css文件會和js文件打包在一起） plugins: [ new ExtractTextPlugin("styles.min.css") ] }
生產環境webpack.prod.js配置
webpack 自帶了 UglifyJsPlugin，它運行 UglifyJS來壓縮輸出文件。
// webpack.prod.js const webpack = require(‘webpack‘); const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) module.exports = { /*...*/ new webpack.optimize.UglifyJsPlugin({ output: { comments: false // 刪除註釋 }, compress: { warnings: false // 不顯示警告，默認為false } }), new HtmlWebpackPlugin({ //根據模板插入css/js等生成最終HTML filename: ‘build/‘, //生成的html存放路徑 template: ‘./src/template/index.html‘, //html模板路徑 hash: true, //為靜態資源css文件和js生成hash值 title: ‘口袋‘, favicon: ‘./img/favicon.ico‘, inject: true, //所有js資源放到body底部 minify: { removeComments: true, //去掉註釋 collapseWhitespace: true, //去掉空格 minifyCSS: true, //壓縮html裏的css minifyJS: true //壓縮html裏的js } }), };
html-webpack-plugin插件詳解請看（https://www.npmjs.com/package/html-webpack-plugin）
安裝方法
$ npm install webpack -g
運行webpack
webpack --display-error-details 後面參數“--display-error-details”是推薦加上的，方便出錯時能更好定位到問題。 其他主要參數有：
$ webpack --watch //監聽變動並自動打包
$ webpack -p //壓縮混淆腳本
$ webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪裏了
下面我們添加一個用於啟動 webpack 的 npm script 腳本：
package.json
{ "name": "demo", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config webpack.config.js --inline --hot", "build": "webpack --config webpack.prod.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.4", "csv-loader": "^2.1.1", "file-loader": "^0.11.2", "html-webpack-plugin": "^2.29.0", "style-loader": "^0.18.2", "webpack": "^3.0.0", } }
開發環境運行方法
使用 webpack-dev-server 開發服務是一個更好的選擇。webpack-dev-server是一個小型的Node.js Express服務器,它將啟動一個 express 靜態資源 web 服務器，並且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ (端口號可配置) 可以瀏覽項目中的頁面和編譯後的資源輸出，並且通過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。
現在，我們可以在命令行中運行 npm start，就會看到瀏覽器自動加載頁面。如果現在修改和保存任意源文件，web 服務器就會自動重新加載編譯後的代碼。趕緊試一下！有一點需要註意的是:webpack-dev-server啟動項目生成的包並沒有放在你的真實目錄中,而是放在了內存中，你從chrome瀏覽器中Source面板中可以看見.
生產環境運行方法
使用 npm run build啟動項目
不熟悉npm scripts的，請找阮老師文章 [http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html]基於 webpack 指引就寫到這裏，要是看了之後能夠讓一臉的茫然的你豁然開朗，可以請我喝咖啡，你也可以參考下述的文章來入門：
[http://zhaoda.net/webpack-handbook/install.html]
[http://webpack.github.io/docs/]
webpack構建工具快速上手指南