【webpack系列】webpack4.x入門配置基礎（一）

saucxs發表於2019-07-19
Web

一、前言

webpack在不斷的迭代優化，目前已經到了4.29.6。在webpack4這個版本中，做了很多優化，引入了很多特性，將獲得更多模組型別，.mjs支援，更好的預設值，更為簡潔的模式設定，更加智慧的chunk，新增的splitChunks來自定義分隔程式碼塊等等。升級待4，在打包速度，程式碼體積，數量，以及執行效率上有一個飛躍。

 

二、安裝webpack4最基礎入門

2.1首先初始化npm 專案，npm init初始化，生成package.json

node版本建議8.2以上

npm init -y
npm i webpack webpack-cli webpack-dev-server -D

npm i -D是npm install --save-dev 的縮寫，是安裝模組並儲存到package.json的devDependencies中，主要是開發環境的依賴包。

 

2.2新建src/index.js 和 dist/index.html

 

 

2.3webpack4是零配置

在使用webpack進行打包的時候，預設情況下會將src下的入口檔案(index.js)進行打包。

可以直接在終端中輸入命令webpack 將當前的內容進行一個簡單的打包。

這樣dist資料夾下面多了一個main.js檔案。

但是有一個黃色警告，mode是webpack中獨有的，兩種打包環境，一個是開發環境：development，另外一個是生產環境：production。

打包的時候，輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了。

下面是webapck --mode=production命令打包，這個是程式碼壓縮過的，細心的朋友應該也發現打包後小了很多。

 

2.4新建config/webpack.config.js建立檔案

在 webpack v4 中，可以無須任何配置，然而大多數專案會需要很複雜的設定，這就是為什麼 webpack 仍然要支援 配置檔案。這比在 terminal(終端) 中手動輸入大量命令要高效的多，所以讓我們建立一個配置檔案：

進入到webpack.config.js檔案中進行配置，具體在程式碼中註釋（這裡簡單的一些，具體的下面會給大家）

const path = require("path");

module.exports = {
    mode: 'development',
    /*入口檔案配置*/
    entry: {
        main: './src/index.js'
    },
    /*出口檔案配置*/
    output: {
        /*打包路徑*/
        path: path.resolve(__dirname, '../dist'),
        /*打包檔名稱*/
        filename: "main.js"
    },
    /*模組：例如解讀css，圖片轉換，壓縮*/
    module: {

    },
    /*外掛，用於生產的各種功能*/
    plugins: [

    ],
    /*配置webpack開發服務的功能*/
    devServer: {

    }
}

現在不能執行之前的webpack --mode="development"命令了會報下面的錯誤。

這裡是因為webpack4打包預設找的src下面的index.js入口，我們前面已經刪除了，現在這裡src下面是main.js檔案，所以找不到就報ERROR in Entry module not found: Error: Can't resolve './src' ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\2019github\resume'錯誤。

所以這裡我們到package.json裡面配置下命令，讓打包的時候執行我們在config/webpack.dev.js下面配置的入口。

 

2.5package.json配置命令

執行npm run build

現在配置打包時候的入口檔案以及出口檔案，很多朋友看webpack.dev.js中的註釋。入口是./src/main.js

開啟index.html

注意：

1、如果你使用的是 npm 5，你可能還會在目錄中看到一個 package-lock.json 檔案。

 

以上就是最基礎的webpack4的搭建。

 

 

三、管理資源

在 webpack 出現之前，前端開發人員會使用 grunt 和 gulp 等工具來處理資源，並將它們從 /src 資料夾移動到 /dist 或 /build 目錄中。

像 webpack 這樣的工具，將動態打包所有依賴（建立所謂的 依賴圖(dependency graph)）。

webpack 最出色的功能之一就是，除了引入 JavaScript，還可以通過 loader 引入任何其他型別的檔案。

3.1 載入css

在js模組中，import 一個css檔案，你需要安裝style-loader和css-loader，並在配置檔案中新增這些loader。

npm i style-loader css-loader --save-dev

webpack.config.js中

const path = require("path");

module.exports = {
    mode: 'development',
    /*入口檔案配置*/
    entry: {
        main: './src/index.js'
    },
    /*出口檔案配置*/
    output: {
        /*打包路徑*/
        path: path.resolve(__dirname, '../dist'),
        /*打包檔名稱*/
        filename: "main.js"
    },
    /*模組：例如載入css，圖片轉換，壓縮*/
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    /*外掛，用於生產的各種功能*/
    plugins: [

    ],
    /*配置webpack開發服務的功能*/
    devServer: {

    }
}

webpack 根據正規表示式，來確定應該查詢哪些檔案，並將其提供給指定的 loader。在這個示例中，所有以 .css 結尾的檔案，都將被提供給 style-loader 和 css-loader。

通過在專案中新增一個新的 style.css 檔案，並將其 import 到我們的 index.js中：

在src/index.js

import _ from 'lodash'
import './css/index.css'

function component() {
    let ele = document.createElement('div');
    ele.innerHTML = _.join(['你好,2019,saucxs','webpack']);
    return ele
}

document.body.appendChild(component());

現在執行 build 命令：

檢視後發現：

注意：在多數情況下，你也可以進行 CSS 提取，以便在生產環境中節省載入時間。最重要的是，現有的 loader 可以支援任何你可以想到的 CSS 風格 - postcss, sass 和 less 等。

 

3.2 載入image影象

假想，現在我們正在下載 CSS，但是像 background 和 icon 這樣的影象，要如何處理呢？使用 file-loader，我們可以輕鬆地將這些內容混合到 CSS 中：

npm install file-loader --save-dev

webpack.config.js

const path = require("path");

module.exports = {
    mode: 'development',
    /*入口檔案配置*/
    entry: {
        main: './src/index.js'
    },
    /*出口檔案配置*/
    output: {
        /*打包路徑*/
        path: path.resolve(__dirname, '../dist'),
        /*打包檔名稱*/
        filename: "main.js"
    },
    /*模組：例如載入css，圖片轉換，壓縮*/
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    /*外掛，用於生產的各種功能*/
    plugins: [

    ],
    /*配置webpack開發服務的功能*/
    devServer: {

    }
}

在使用 css-loader 時，如前所示，會使用類似過程處理你的 CSS 中的 url('./my-image.png')。loader 會識別這是一個本地檔案，並將 './my-image.png' 路徑，替換為 output 目錄中影象的最終路徑。而 html-loader 以相同的方式處理 <img src="./my-image.png" />。

我們向專案新增一個影象，然後看它是如何工作的，你可以使用任何你喜歡的影象：

src/index.js

import _ from 'lodash'
import './css/index.css'
import sau from './img/sau.jpg'

function component() {
    let ele = document.createElement('div');
    ele.innerHTML = _.join(['你好,2019,saucxs','webpack']);

    var image = new Image();
    image.src = sau;
    ele.appendChild(image)

    return ele
}

document.body.appendChild(component());

src/css/index.css

body{
    color: pink;
    background: url('../img/sau.jpg');
}

重新構建並再次開啟 index.html 檔案

果一切順利，你現在應該看到你的 sau.jpg圖示成為了重複的背景圖，以及文字旁邊的 img 元素。如果檢查此元素，你將看到實際的檔名已更改為 e2c11146949c08b542c068aefc0c1d7b.jpg。這意味著 webpack 在 src 資料夾中找到我們的檔案，並對其進行了處理！

 

3.3 載入字型

像字型這樣的其他資源如何處理呢？file-loader 和 url-loader 可以接收並載入任何檔案，然後將其輸出到構建目錄。這就是說，我們可以將它們用於任何型別的檔案，也包括字型。讓我們更新 webpack.config.js 來處理字型檔案：

webpack.config.js

{
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
         'file-loader'
      ]
}

 

相關文章