什麼是webpack？

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。
當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle

為什麼要用webpack？

如今很多網頁其實可以看做是功能豐富的應用，它們擁有著複雜的JavaScript程式碼和一大堆依賴包。為了簡化開發的複雜度，前端社群湧現出了很多好的實踐方法

a:模組化，讓我們可以把複雜的程式細化為小的檔案;

b:類似於TypeScript這種在JavaScript基礎上拓展的開發語言：使我們能夠實現目前版本的JavaScript不能直接使用的特性，並且之後還能能裝換為JavaScript檔案使瀏覽器可以識別；

c:scss，less等CSS前處理器

…

這些改進確實大大的提高了我們的開發效率，但是利用它們開發的檔案往往需要進行額外的處理才能讓瀏覽器識別,而手動處理又是非常繁瑣的，這就為WebPack類的工具的出現提供了需求。

webpack的用處

1. webpack可以根據模板生成HTML，並自動處理上面的css/js引用路徑。
2. webpack可以自動處理<img>
   裡面的圖片路徑，css裡面背景圖的路徑，字型引用
3. webpack可以開啟本地伺服器，一邊改寫程式碼，一邊自動更新頁面內容
4. webpack可以編譯jsx es6 sass less coffescript等，並新增md5、sourcemap等輔助
5. webpack可以非同步載入內容，不需要時不載入到DOM
6. webpack可以配合vue.js和react.js等框架開發。

既然webpack的用處那麼大，那我們該如何配置呢，接下來我就教大家如何手動配置一個webpack

第一步：首先在專案中安裝webpack 執行命令：

yarn add [email protected] --dev//加dev表示僅在開發環境中使用，打包到線上不用到該包

　　webpakc的核心配置主要是4個：1.入口（entry) 2.輸出（output）3.loader(載入器) 4.外掛（plugins），簡單的配置如下圖：

執行命令進行打包，這裡還沒配置快捷的命令使用相對路徑的方式啟動webpack，截圖如下

第二步：安裝處理打包html檔案的功能：安裝外掛htmlWebpackPlugin,執行命令

npm install --save-dev html-webpack-plugin   //--save-dev是你開發時候依賴的東西，--save是你釋出之後還依賴的東西，dev就是develop（發展）的縮寫

你可以指定生成的html的模板,配置如下圖：

配置以後webpack打包後的html的基本結構就和你配置的index.html一樣了

第三部：配置babel-loader

配置這個的作用是能夠把新的js語法如ES6轉換成低版本瀏覽器能識別的語法，這樣我們就可以放心的使用語法去編寫專案，不用擔心相容問題

首先安裝babel-loader:

npm install -D babel-loader @babel/core @babel/preset-env webpack

在配置檔案的module的rules中新增配置：

 // react(jsx)語法的處理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react']
                    }
                }
            },

第四部：安裝react進行處理的外掛

要想webpack執行識別react的語法需要執行一下語句進行安裝：

yarn add babel-preset-react@6.24.1 --save -dev

然後在配置檔案中進行配置，

 // react(jsx)語法的處理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env','react']
                    }
                }
            },

這裡注意因為react使用的jax檔案所以這裡我們的將原來的app.js檔案改為app.jsx檔案

然後將react存放如一個已經存在的專案中執行命令：

yarn add react ract-dom

第五步：安裝樣式處理的功能

為了從JavaScript模組中import一個css檔案，你需要在module配置中安裝並新增style-lader和css-loader

執行一下命令進行安裝

npm install --save-dev style-loade css-loader

在配置檔案中配置規則，當字尾為css的時候使用該載入器：

  // css檔案的處理
            {
                test: /\.css$/,
                     use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }

引入該包以後我們就可以在入口檔案中使用import 引入css檔案啦

import './index.css'

這種處理方式是都統一打包都js檔案中了，我們要把css的樣式處理成單獨的css檔案就需要進入一下外掛

npm install --save-dev extract-text-webpack-plugin

安裝後在webpack中個引入外掛

var ExtractTextPlugin = require('extract-text-webpack-plugin');

在plugins中使用：

//獨立css檔案
        new ExtractTextPlugin("css/[name].css"),

第六步：安裝能夠處理和識別sass的包

安裝包：需要同時安裝兩個包才能正常的使用sass

npm install sass-loader node-sass --save-dev

在webpack的配置檔案中進行u如下的配置：

// sass檔案的處理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }

第七步：配置載入圖片的處理，有時候我們需要在css中引入圖片，比如背景等等，納悶我們就需要安裝一下包

$ npm install file-loader --save-dev

但是我們不用這個我們用url-loader，這是fileloader的一個封裝,實際我們file-loader和url-loader兩個都要安裝，因為url-loader是依賴file-loader的

繼續安裝url-loader的包：

$ npm install url-loader --save-dev

安裝後對配置檔案進行如下的配置：

// 圖片的配置
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                             name: 'resource/[name].[ext]'
                        }
                    }
                ]
            },

這個是時候我們就可以在scss檔案中引入圖片作為背景了，引入的圖片也會打包

第八步：引入處理字型圖示的功能

需要要進行一下的配置，更配置處理圖片的方式差不多，只不過是改變了字尾為字型圖示的字尾

 {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                             name: 'resource/[name].[ext]'
                        }
                    }
                ]
            }

這裡引入的圖示是Font Awesome圖示

安裝這個圖示庫

yarn add font-awesome

在app.jsx中引入

improt '字型的地址'

第九步：使用提出公用模組的外掛

 // 提出公共模組
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename: 'js/base.js'
        })

因為使用了webpack需要在頭部對webpack進行引用：

const webpack           = require('webpack');

第十步：對生成的檔案的路徑進行優化，js，css，image檔案都分類放在指定的資料夾中

可參考如下進行配置：

第十一步：安裝webpack-dev-server,讓修改自動重新整理

npm install --save-dev webpack-dev-server

在配置檔案中進行配置

  devServer: {
                port:8086,  /
             historyApiFallback:{
                index:'/dist/index.html'
              },

port可以配置伺服器啟動的埠號

啟動devserver，方法通啟動webpack的方式一樣

啟動後發現字型檔案訪問不了

增加一個publicPath：‘/dist/'

module.exports={
    entry:'./src/app.jsx',
    output:{
        path: path.resolve(__dirname,'dist'),
        publicPath：'/dist/',
        filename: 'js/app.js'
    },

第十二步：配置快捷的啟動命令

不論是打包還是啟動服務，這個程式碼都太長，這個時候我們可以自己配置，具體配置如下，在package.json檔案中進行配置如下

 "scripts": {
    "dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
    "dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
    "dist": "WEBPACK_ENV=online webpack -p",
    "dist_win": "set WEBPACK_ENV=online && webpack -p"
  },

這樣我們就可以通過yarn run ’dev' 等等來快速執行相應的命令啊

專案中如果哦包錯如下：

直接在外部加入圖示檔案即可

這樣一個react專案的webpack配置就完成了，我們可以開始在上面寫react框架網頁啦！

分享就到這裡 end!