從零開始配置webpack(基于babel 7版本)

waltr 發布于2019-08-23 16:09 / 2594人閱讀

摘要：支持轉義轉義需要的依賴，支持裝飾器。在中增加的配置數組中。壓縮文件安裝依賴在中的中增加配置打包前先清空輸出目錄在中增加的配置至此，配置已經基本能滿足需求。

webpack 核心概念:

Entry: 入口

Module:模塊，webpack中一切皆是模塊

Chunk:代碼庫，一個chunk由十多個模塊組合而成，用于代碼合并與分割

Loader:模塊轉換器，用于把模塊原內容按照需求轉換成新內容

Plugin:擴展插件，在webpack構建流程中的特定時機注入擴展邏輯來改變構建結果或做你想要做的事情

Output: 輸出結果

webpack流程:

webpack啟動后會從 Entry 里配置的 Module 開始遞歸解析 Entry 依賴的所有Module.每找到一個Module,就會根據配置的Loader去找出對應的轉換規則，對Module進行轉換后，再解析出當前的Module依賴的Module.這些模塊會以Entry為單位進行分組，一個Entry和其所有依賴的Module被分到一個組也就是一個Chunk。最好Webpack會把所有Chunk轉換成文件輸出。在整個流程中Webpack會在恰當的時機執行Plugin里定義的邏輯。

下面我們開始從零開始配置一個支持打包圖片,CSS,LESS,SASS,支持ES6/ES7和JSX語法，并對代碼進行壓縮的webpack配置.

1. 最簡webpack配置

首先初始化npm和安裝webpack的依賴:

npm init -y
npm install --save-dev webpack webpack-cli

配置 webpack.config.js 文件如下:

const path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "src/index.js"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/"
    }
}

說明: publicPath 上線時配置的是cdn的地址。

使用命令進行打包:

webpack --mode production

也可以將其配置到 package.json 中的 scripts 字段.

入口文件為 src/index.js, 打包輸出到 dist/bundle.js.

2. 使用模板 html

html-webpack-plugin 可以指定template模板文件，將會在output目錄下，生成html文件，并引入打包后的js.

安裝依賴:

npm install --save-dev html-webpack-plugin

在 webpack.config.js 增加 plugins 配置:

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    //...other code
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src/index.html")
        })
    ]
}

HtmlWebpackPlugin 還有一些其它的參數,如title(html的title),minify(是否要壓縮),filename(dist中生成的html的文件名)等

3. 配置 webpack-dev-server

webpack-dev-server提供了一個簡單的Web服務器和實時熱更新的能力

安裝依賴:

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

在 webpack.config.js 增加 devServer 配置:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    //...other code
    devServer: {
        contentBase: "./dist",
        port: "8080",
        host: "localhost"
    }
}

在 package.json 的 scripts 字段中增加:

webpack-dev-server --mode development

之后，我們就可以通過 npm run dev , 來啟動服務。

更多 webpack-dev-server 的知識，請訪問: https://webpack.js.org/config...

4. 支持加載css文件

通過使用不同的 style-loader 和 css-loader, 可以將 css 文件轉換成JS文件類型。

安裝依賴:

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

在 webpack.config.js 中增加 loader 的配置。

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /.css/,
                use: ["style-loader", "css-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            }
        ]
    }
}

loader 可以配置以下參數:

test: 匹配處理文件的擴展名的正則表達式

use: loader名稱

include/exclude: 手動指定必須處理的文件夾或屏蔽不需要處理的文件夾

query: 為loader提供額外的設置選項

如果需要給loader傳參，那么可以使用use+loader的方式,如:

module.exports = {
    //other code
    module: {
        rules: [
            {
            use: [{
                        loader: "style-loader",
                        options: {
                            insertAt: "top"
                        }
                    },
                    "css-loader"
                ],
                //....
            }
        ]
    }
}

5. 支持加載圖片

file-loader: 解決CSS等文件中的引入圖片路徑問題

url-loader: 當圖片小于limit的時候會把圖片Base64編碼，大于limit參數的時候還是使用file-loader進行拷貝

如果希望圖片存放在多帶帶的目錄下，那么需要指定outputPath

安裝依賴:

npm install --save-dev url-loader file-loader

在 webpack.config.js 中增加 loader 的配置(增加在 module.rules 的數組中)。

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            outputPath: "images"
                        }
                    }
                ]
            }
        ]
    }
}

6.支持編譯less和sass

有些前端同事可能習慣于使用less或者是sass編寫css，那么也需要在 webpack 中進行配置。

安裝對應的依賴:

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

在 webpack.config.js 中增加 loader 的配置(module.rules 數組中)。

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /.less/,
                use: ["style-loader", "css-loader", "less-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            },
            {
                test: /.scss/,
                use: ["style-loader", "css-loader", "sass-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            }
        ]
    }
}

7.支持轉義 ES6/ES7/JSX

ES6/ES7/JSX 轉義需要 Babel 的依賴，支持裝飾器。

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread

在 webpack.config.js 中增加 loader 的配置(module.rules 數組中)。

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /.jsx?$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env", "@babel/react"],
                            plugins: [
                                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
                            ]
                        }
                    }
                ],
                include: path.resolve(__dirname, "src"),
                exclude: /node_modules/
            },
        ]
    }
}

8.壓縮JS文件

安裝依賴:

npm install --save-dev uglifyjs-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

在 webpack.config.js 中增加 optimization 的配置

const UglifyWebpackPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    //other code
    optimization: {
        minimizer: [
            new UglifyWebpackPlugin({
                parallel: 4
            })
        ]
    }
}

9.分離CSS(如果CSS文件較大的話)

因為CSS的下載和JS可以并行，當一個HTML文件很大的時候，可以把CSS多帶帶提取出來加載

npm install --save-dev mini-css-extract-plugin

在 webpack.config.js 中增加 plugins 的配置,并且將 "style-loader" 修改為 { loader: MiniCssExtractPlugin.loader}。

CSS打包在多帶帶目錄，那么配置filename。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    //other code
    module: {
        rules: [
            {
                test: /.css/,
                use: [{ loader: MiniCssExtractPlugin.loader}, "css-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            },
            {
                test: /.less/,
                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "less-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            },
            {
                test: /.scss/,
                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "sass-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        })
    ]
}

10.壓縮CSS文件

安裝依賴:

npm install --save-dev optimize-css-assets-webpack-plugin

在 webpack.config.js 中的 optimization 中增加配置

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    //other code
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    }
}

11.打包前先清空輸出目錄

npm install --save-dev clean-webpack-plugin

在 webpack.config.js 中增加 plugins 的配置

const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    //other code
    plugins: [
        new CleanWebpackPlugin()
    ]
}

至此，webpack配置已經基本能滿足需求。

完整webpack.config.js和package.json文件

webpack.config.js文件:

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const UglifyWebpackPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    entry: path.resolve(__dirname, "src/index.js"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/"
    },
    devServer: {
        contentBase: "./dist",
        port: "8080",
        host: "localhost"
    },
    module: {
        rules: [
            {
                test: /.jsx?$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env", "@babel/react"],
                            plugins: [
                                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
                            ]
                        }
                    }
                ],
                include: path.resolve(__dirname, "src"),
                exclude: /node_modules/
            },
            {
                test: /.css/,
                use: [{ loader: MiniCssExtractPlugin.loader}, "css-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            },
            {
                test: /.less/,
                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "less-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            },
            {
                test: /.scss/,
                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "sass-loader"],
                exclude: /node_modules/,
                include: path.resolve(__dirname, "src")
            },
            {
                test: /.(gif|jpg|png|bmp|eot|woff|woff2|ttf|svg)/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 1024,
                            outputPath: "images"
                        }
                    }
                ]
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyWebpackPlugin({
                parallel: 4
            }),
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, "src/index.html"),
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].css"
        }),
        new CleanWebpackPlugin()
    ]
}

package.json文件:

{
  "name": "webpk",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
    "@babel/preset-env": "^7.4.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1"
  }
}

更多loader和plugin的參數可以參考:
https://www.webpackjs.com/loa...
https://www.webpackjs.com/plu...

謝謝您花費寶貴的時間閱讀本文，如果本文給了您一點幫助或者是啟發，那么不要吝嗇你的贊和Star哈，您的肯定是我前進的最大動力。https://github.com/YvetteLau/...

如果你有其它的webpack配置需求，歡迎留言~

關注小姐姐的公眾號，和小姐姐一起學前端。

GPU云服務器云服務器從零開始 linux從零開始 python從零開始從零開始php

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102740.html

學習從零開始搭建React腳手架

摘要：寫在前面準備學習一下和相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現在半成品的過程中，目前完成開發模式的相關操作，添加了按需加載的地步。寫在前面準備學習一下react和webpack相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;...

cod7ce 2019-08-23 11:25 評論0 收藏0
webpack從零開始第5課:模塊篇

摘要：目錄第課安裝和第課配置文件第課做為的一個模塊來使用第課插件篇第課模塊篇第課在開發中使用本文參考文檔官方模塊配置模塊配置中文翻譯模塊配置中文翻譯版本官方內置清單第三方清單代碼托管及用法配置官方文檔模塊總覽我是首頁萬事開頭 webpack目錄第1課: 安裝webpack和webpack-dev-server 第2課: 配置文件第3課: 做為node的一個模塊來使用第4課: ...

tinylcy 2019-08-21 18:20 評論0 收藏0
從零開始做Vue前端架構（1）

摘要：前言想想也已經做過不少架構的項目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構了。前言想想也已經做過不少架構的項目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就對現有的架構有各種想法，有好的，有壞的，總之，用起來還是不爽。vue-cli雖然可以很快地構建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 評論0 收藏0
工程實戰-ES6環境配置

摘要：最近在學習語法，故有了從零開始搭建環境的想法。默認會將這些輔助函數內聯到每一個文件里，這樣文件多的時候，項目就會很大。最近在學習ES6語法，故有了從零開始搭建ES6環境的想法。下面第一部分是單純的ES6環境配置，第二部分是基于webpack環境的工程配置 1. 純ES6環境配置 1.1 packages中的依賴項： devDependencies: { babel-cli: ^6...

novo 2019-08-22 14:03 評論0 收藏0
從零開始搭建一個React項目

摘要：優化代碼拆分從入口文件開始，遞歸地構建了整個應用的模塊依賴圖表，然后通常會將所有的模塊打包成一個。如果你還不知道什么是React，請點擊這里github源碼安裝Node.js 如果你還不知道什么是ECMAScript，請點擊這里如果你還不知道什么是Node.js，請點擊這里下載Node.js并安裝；接著打開windows命令行窗口分別輸入node -v及npm -v如下圖所示，...

HollisChuang 2019-08-23 12:19 評論0 收藏0