只要這幾步，webpack速成不是事兒

一、Webpack 是什麼？

直接上圖

簡言之：webpack能夠作以下的事情

• 打包全部的腳本
• 打包全部的圖片
• 打包全部的樣式

一句話：打包全部的資源

二、webpack 之安裝

2.1 webpack安裝環境依賴

webpack是基於Node的， 在安裝Webpack以前須要安裝Node環境, 這裏就不贅述了。安裝成功後打開CMD控制檯，輸入以下命令驗證是否安裝成功

在這裏安利一個node版本管理插件 nvm, 能夠實現本地多個node 版本自由轉換

建立你的項目目錄, 在當前目錄下執行 npm init, 初始化項目目錄環境，生成 package.json

package.json裏存放着當前項目的相關信息，包含 版本號，開發者，開發環境依賴，生產環境依賴，在這裏咱們重點關注 scripts， webpack構建命令在這裏配置。

2.2 安裝webpack

執行 npm install webpack webpack-cli -D ， 其中 -D 也就是 --save-dev, 若是是要做爲生產環境的依賴則是 --save 便可

安裝成功後， 在 package.json 文件 會保存對應的安裝信息

2.3 如何使用webpack構建呢？

筆者當前使用的是 webpack4.0+, 在 webpack 4 中，能夠無須任何配置使用也就是 0配置，然而大多數項目會須要很複雜的設置，因此 webpack 仍然支持使用配置文件的方式。

首先在項目目錄下建立 src 目錄，而後建立 index.js， webpack4 構建的默認入口文件 src/index.js

2.3.1 構建方式一： 0配置構建

此時，就能夠發揮webpack的構建效果啦。 執行 npx webpack， 構建成功後會在項目目錄下自動生成一個dist目錄，同時生成構建後的js文件： main.js, 默認名字，不用擔憂，這個是能夠修改的喲。

科普時間：
1. npm 5.2.0 版本中內置了伴生命令：npx，相似於 npm 簡化了項目開發中的依賴安裝與管理
2. npx 會自動查找當前依賴包中的可執行文件，若是找不到，就會去 PATH 裏找。若是依然找不到，
就會幫你安裝, 這裏的PATH 就是項目 node_modules
3.若是npm版本較低，能夠全局安裝 npm install -g npx
複製代碼

至此你已經學會如何使用 webpack 這門武林祕籍啦。那咱們在瀏覽器中看看效果吧。咱們在dist目錄手動建立一個index.html, 同時引入 main.js

經過查看構建後的main.js文件，能夠看到是壓縮後的代碼，這是由於 webpack 提供了不一樣的打包 mode

npx webpack --mode production  //構建用於發佈的代碼, 代碼會壓縮
npx webpacck --mode development //開發過程當中構建代碼, 代碼不壓縮
複製代碼

2.3.2 構建方式二 使用 webpack.config.js

在項目根目錄下建立 webpack.config.js, 前面提到過 webpack 是基於 node環境的， 因此一樣採用的是 Commonjs 包管理規範。

module.exports = {
    entry: '', //打包入口文件,
    output: {}, //打包出口文件,
    plugins: [], //配置插件
    module: {
        rules: []  //配置各類用於源文件編譯加載的loader
    },
    devServer: {} //配置開發靜態http服務
}
複製代碼

以下配置，執行 npx webpack --mode development, 一樣也能夠構建成功

let path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
複製代碼

構建後會生成如圖文件

若是想保持和源文件相同的名字則能夠這樣配置 '[name].js', 若是要加上hash值，則 '[name].[hash].js'

let path = require('path');
module.exports = {
    entry: {
        index: './src/index.js }, output: { filename: '[name].[hash].js', path: path.resolve(__dirname, 'dist') } } 複製代碼

2.3.3 html 文件之構建

上面在驗證構建後js是採用的手動方式去建立 html， 並手動引入，若是webpack這麼弱，那也太弱了吧。哈哈哈...

那該怎麼解決這個問題呢？下面咱們就要用到插件: html-webpack-plugin, 首先得安裝這個插件 npm i html-webpack-plugin， 能夠去npm官網看看其用法。

引入並調用該插件。執行npx webpack命令。則會幫你在dist目錄，自動建立相應的html和js， 並自動引用相應的靜態資源文件.

再說說

new HtmlWebpackPlugin({
        filename: 'a.html', //構建後生成的文件的名字
        chunks: ['index'],  //構建時所用到的js源文件， 與 entry 中的 key 一一對應
        template: './src/index.html',  //所用到的html源文件，主要是考慮到一個項目中可能有多個html文件
        hash: true, //自動給構建後的html文件中的js, css等引入路徑加上hash值，相似get請求中加上時間戳
    }),
複製代碼

2.3.4 css 文件之構建

* 安裝插件 npm i extract-text-webpack-plugin@next -D
* 安裝相應的css loader : npm i style-loader css-loader -D
* 在index.js中文件引入 index.css 文件
* 在webpack.config.js中引入插件
複製代碼

style 標籤載入 css文件

plugins: [
        cssExtract,
        new HtmlWebpackPlugin()
    ],
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
複製代碼

以link方式載入css文件，也就是抽離css文件

{
    test: /\.css$/,
    use: cssExtract.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader',
        }]
    })
  }
複製代碼

css 文件的處理就到這裏，其餘css文件，好比 less-loader, sass-loader, 後面做一個專題再展開討論

優化css加載插件 npm i purifycss-webpack purify-css -D

2.3.5 圖片處理

html文件中引入img 標籤， 這裏須要用到 html-withimg-loader

npm i html-withimg-loader -D
複製代碼

{
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader'
                }]
            },
            {
                test: /\.html/,
                // 處理html中的圖片loader
                use: 'html-withimg-loader'
            }
複製代碼

構建後dist目錄下的 html 中的 img標籤

<img src="data:image/png;base64,...'/> 複製代碼

固然大多數狀況下，會選擇將引用的圖片構建在 dist/images 目錄中，此時只需將上述配置稍加修改便可

{
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5,   //
                        outputPath: 'images/'   //構建後的目標目錄
                    }
                }]
            },
            {
                test: /\.html/,
                // 處理html中的圖片loader
                use: 'html-withimg-loader'
            }
複製代碼

區分下 url-loader 和 file-loader的差異

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.
複製代碼

示例說明： 在src/index.css中有以下代碼

div{ background: url(1.png) }
複製代碼

若是將 limit 設置爲 0 時， 構建後 dist/index.css 代碼爲:

div{ background: url(data:image/png;base64,....) }
複製代碼

當limit不爲0時， url-loader 和 file-loader 做用同樣

--------------------------------華麗的分割線--------------------------------------

看到這裏，webpack的最經常使用的幾種用法都已介紹完成。在實際開發過程當中，爲了提升效率。最好在真正開發前配置好這些。

2.3.6 本地靜態服務，自動刷新。

先安裝npm i webpack-dev-server -D，同時在webpack.config.js中配置：

devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 4000,
        open: true,
        hot: true // 還須要配置一個插件 HotModuleReplacementPlugin
    }
複製代碼

執行 npx webpack-dev-server, 便可看到瀏覽器自動打開，並加裝構建後的html文件。

• 那如何才能真正地自動構建，自動刷新，解放雙手呢？ webpack 內置插件 HotModuleReplacementPlugin new webpack.HotModuleReplacementPlugin()

• 刪除構建的歷史文件，可使用 插件 clean-webpack-plugin

2.4 小結

webpack 常見的基本用法如文中所述。在下一章中將帶小夥伴們進一步探討webpack高級應用。歡迎拍磚~~~