webpack構建工具快速上手指南

標籤：指令碼   htm   views   form   www.   href   ...   需要   atom   

最近在研究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 的優勢

1. 在webpack看來一切都是模組，包括javascript、css以及圖片等。

2. 開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等。。

3. 擴充性強，外掛程式機制完善。

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.jsconst 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 靜態資源 網頁伺服器，並且會以監聽模式自動運行 webpack，在瀏覽器開啟 http://localhost:8080/ (連接埠號碼可配置) 可以瀏覽項目中的頁面和編譯後的資源輸出，並且通過一個 socket.io 服務即時監聽它們的變化並自動重新整理頁面。

有一點需要注意的是:webpack-dev-server啟動項目產生的包並沒有放在你的真實目錄中,而是放在了記憶體中，你從chrome瀏覽器中Source面板中可以看見.

 現在，我們可以在命令列中運行 npm start，就會看到瀏覽器自動載入頁面。如果現在修改和儲存任意源檔案，網頁伺服器就會自動重新載入編譯後的代碼。趕緊試一下！
生產環境運行方法

使用 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構建工具快速上手指南