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 的優點

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.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 服務實時監聽它們的變化並自動刷新頁面。

有一點須要注意的是:webpack-dev-server啓動項目生成的包並無放在你的真實目錄中,而是放在了內存中，你從chrome瀏覽器中Source面板中能夠看見.

 如今，咱們能夠在命令行中運行 npm start，就會看到瀏覽器自動加載頁面。若是如今修改和保存任意源文件，web 服務器就會自動從新加載編譯後的代碼。趕忙試一下！

生產環境運行方法

使用 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/]