一個簡單的webpack配置

摘要： 捂臉~~~~ 都9102年了，現在還來談webpack的配置，是不是有點不合適哪（我不管！），基於vue-cli或者create-react-app生成的專案，也已經一鍵為我們配置好了webpack，看起來似乎並不需要我們深入瞭解 。 不過呢，自己嘗試去搭建一下webpack的 開發環境玩一...

捂臉~~~~ 都9102年了，現在還來談webpack的配置，是不是有點不合適哪（我不管！），基於vue-cli或者create-react-app生成的專案，也已經一鍵為我們配置好了webpack，看起來似乎並不需要我們深入瞭解 。 不過呢，自己嘗試去搭建一下webpack的 開發環境玩一下也是極好的~~

webpack ：模組化兼打包工具，可以把複雜得程式細化為小的檔案，通過一個入口檔案,找到你的專案得所有依賴的檔案使用loaders處理它們，最後打包成為一個（或者多個）瀏覽器可以識別的javascript檔案。

作用 ：

        1、模組化，讓我們把程式可以細化為細小的檔案；
        2、類似於TypeScript這種在javaScript基礎上拓展的開發語言：使我們能夠實現目前版本的javaScript不能直接使用的特性。並且之後還能轉換為Javascript檔案是瀏覽器可以識別。
        3、可以使用，less，SCss等scss前處理器。

webpack與gulp區別：

webpack是一種模組化的解決方案，可以把各種資源都作為模組來使用或處理。

gulp是一種能能夠優化前端的開發流程的工具， 側重於前端開發得整個過程得控制管理 ，通過一系列外掛將原本複雜繁瑣得任務自動化， 並不能將除了js之外的資源模組化 。

webpack的優點使得webpack在很多場景下可以替代gulp類的工具。

webpack的基本配置項 ：

    入口檔案；entry
    出口檔案；output
    module：css，js，img都叫做module，打包在module中進行。
            rules就是louders的配置項。
    pulgins：webpack的外掛。
    resolves：webpack的配置項。（例：在vue中有@可以代表src，能夠通過@代表src就是因為在webpack中進行了配置）

webpack的基本使用：

1、全域性安裝：

       npm install webpack@3 -g

2、建立資料夾-初始化：

        npm init -y

3、區域性安裝webpack：

       npm install webpack@3 -S

4、在資料夾下建立webpack.config.js檔案：

5、建立src目錄在其中建立main.js

6、外掛-htmlwebpackplugin-(在dist中生成一個引入了js的html檔案)

        安裝：npm install html-webpack-plugin -S
        使用方法：在檔案中引入後；
                在plugins中new一個htmlwebpackplugin物件
                有兩個必傳的引數:
                    1、template（模版）
                    2、filename：(生成檔案的名稱)
                不必須引數;
                    1、title（在html中使用ejs模版型語法）

7、外掛-建立伺服器-webpackdevserver（開啟服務實現熱更新）

        安裝：npm install webpack-dev-server@2 -S
        使用方法：在package.json的scripts中增加指令“dev”：“webpack-dev-server”（啟動一下）

8、外掛-打包js檔案-

安裝：npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

9、外掛-打包css，scss檔案-

安裝：npm install --save-dev style-loader css-loader sass-loader node-loader

webpack.config.js檔案內容如下：

好啦 就是這個樣子啦，略糙，見諒~