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

yiliwei發表於2018-05-02
Web

1、Webpack 是什麼？

直接上圖

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

簡言之：webpack可以做如下的事情

  • 打包所有的指令碼
  • 打包所有的圖片
  • 打包所有的樣式

一句話：打包所有的資源

2、webpack 之安裝

2.1 webpack安裝環境依賴

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

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

在這裡安利一個node版本管理外掛 nvm, 可以實現本地多個node 版本自由轉換

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

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

package.json裡存放著當前專案的相關資訊，包含 版本號，開發者，開發環境依賴，生產環境依賴，在這裡我們重點關注 scripts， webpack構建命令在這裡配置。

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

2.2 安裝webpack

執行 npm install webpack webpack-cli -D ， 其中 -D 也就是 --save-dev, 如果是要作為生產環境的依賴則是 --save 即可

安裝成功後， 在 package.json 檔案 會儲存對應的安裝資訊

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

2.3 如何使用webpack構建呢？

筆者當前使用的是 webpack4.0+, 在 webpack 4 中，可以無須任何配置使用也就是 0配置，然而大多數專案會需要很複雜的設定，所以 webpack 仍然支援使用配置檔案的方式。

首先在專案目錄下建立 src 目錄，然後建立 index.js， webpack4 構建的預設入口檔案 src/index.js

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

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速成不是事兒

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

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

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

通過檢視構建後的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')
    }
}
複製程式碼

構建後會生成如圖檔案

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

如果想保持和原始檔相同的名字則可以這樣配置 '[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')
    }
}
複製程式碼

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

2.3.3 html 檔案之構建

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

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

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

引入並呼叫該外掛。執行npx webpack命令。則會幫你在dist目錄，自動建立相應的html和js， 並自動引用相應的靜態資原始檔.

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

再說說

   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高階應用。歡迎拍磚~~~

相關文章