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

waltr 發(fā)布于2019-08-23 16:09 / 2599人閱讀

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

webpack 核心概念:

Entry: 入口

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

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

Loader:模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容

Plugin:擴(kuò)展插件，在webpack構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來改變構(gòu)建結(jié)果或做你想要做的事情

Output: 輸出結(jié)果

webpack流程:

webpack啟動(dòng)后會(huì)從 Entry 里配置的 Module 開始遞歸解析 Entry 依賴的所有Module.每找到一個(gè)Module,就會(huì)根據(jù)配置的Loader去找出對(duì)應(yīng)的轉(zhuǎn)換規(guī)則，對(duì)Module進(jìn)行轉(zhuǎn)換后，再解析出當(dāng)前的Module依賴的Module.這些模塊會(huì)以Entry為單位進(jìn)行分組，一個(gè)Entry和其所有依賴的Module被分到一個(gè)組也就是一個(gè)Chunk。最好Webpack會(huì)把所有Chunk轉(zhuǎn)換成文件輸出。在整個(gè)流程中Webpack會(huì)在恰當(dāng)?shù)臅r(shí)機(jī)執(zhí)行Plugin里定義的邏輯。

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

1. 最簡(jiǎn)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 上線時(shí)配置的是cdn的地址。

使用命令進(jìn)行打包:

webpack --mode production

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

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

2. 使用模板 html

html-webpack-plugin 可以指定template模板文件，將會(huì)在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 還有一些其它的參數(shù),如title(html的title),minify(是否要壓縮),filename(dist中生成的html的文件名)等

3. 配置 webpack-dev-server

webpack-dev-server提供了一個(gè)簡(jiǎn)單的Web服務(wù)器和實(shí)時(shí)熱更新的能力

安裝依賴:

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 , 來啟動(dòng)服務(wù)。

更多 webpack-dev-server 的知識(shí)，請(qǐng)?jiān)L問: https://webpack.js.org/config...

4. 支持加載css文件

通過使用不同的 style-loader 和 css-loader, 可以將 css 文件轉(zhuǎn)換成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 可以配置以下參數(shù):

test: 匹配處理文件的擴(kuò)展名的正則表達(dá)式

use: loader名稱

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

query: 為loader提供額外的設(shè)置選項(xiàng)

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

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

5. 支持加載圖片

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

url-loader: 當(dāng)圖片小于limit的時(shí)候會(huì)把圖片Base64編碼，大于limit參數(shù)的時(shí)候還是使用file-loader進(jìn)行拷貝

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

安裝依賴:

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

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

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

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

安裝對(duì)應(yīng)的依賴:

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

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

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.支持轉(zhuǎn)義 ES6/ES7/JSX

ES6/ES7/JSX 轉(zhuǎn)義需要 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 數(shù)組中)。

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文件較大的話)

因?yàn)镃SS的下載和JS可以并行，當(dāng)一個(gè)HTML文件很大的時(shí)候，可以把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配置已經(jīng)基本能滿足需求。

完整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"
  }
}

更多l(xiāng)oader和plugin的參數(shù)可以參考:
https://www.webpackjs.com/loa...
https://www.webpackjs.com/plu...

謝謝您花費(fèi)寶貴的時(shí)間閱讀本文，如果本文給了您一點(diǎn)幫助或者是啟發(fā)，那么不要吝嗇你的贊和Star哈，您的肯定是我前進(jìn)的最大動(dòng)力。https://github.com/YvetteLau/...

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

關(guān)注小姐姐的公眾號(hào)，和小姐姐一起學(xué)前端。

云服務(wù)器 GPU云服務(wù)器從零開始 linux從零開始 python從零開始從零開始php

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102740.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

waltr

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點(diǎn)# 模塊內(nèi)聚和耦合的基礎(chǔ)知識(shí)

閱讀 1726·2021-11-22 15:33
FZH119 數(shù)碼管驅(qū)動(dòng)程序修改初始化可支持51 32等多平臺(tái)單片機(jī)

閱讀 2102·2021-10-08 10:04
RackNerd：全場(chǎng)VPS/虛擬主機(jī)7.5折優(yōu)惠，特價(jià)VPS套餐$9.49/年起

閱讀 3554·2021-08-27 13:12
圖片放大鏡注釋詳解

閱讀 3428·2019-08-30 13:06
如何使用純 CSS 制作四子連珠游戲

閱讀 1477·2019-08-29 16:43
前端每日實(shí)戰(zhàn)：130# 視頻演示如何用 CSS 在線字體和 D3 創(chuàng)作一個(gè) Google &

閱讀 1400·2019-08-29 16:40
前端每日實(shí)戰(zhàn)：96# 視頻演示如何用純 CSS 和 D3 創(chuàng)作一艘遨游太空的宇宙飛船

閱讀 794·2019-08-29 16:15
基于JS快速生成各種網(wǎng)格布局工具Grid介紹

閱讀 2752·2019-08-29 14:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章

學(xué)習(xí)從零開始搭建React腳手架

webpack從零開始第5課:模塊篇

從零開始做Vue前端架構(gòu)（1）

工程實(shí)戰(zhàn)-ES6環(huán)境配置

從零開始搭建一個(gè)React項(xiàng)目

發(fā)表評(píng)論

0條評(píng)論

waltr

男|高級(jí)講師

TA的文章

#yyds干貨盤點(diǎn)# 模塊內(nèi)聚和耦合的基礎(chǔ)知識(shí)

FZH119 數(shù)碼管驅(qū)動(dòng)程序修改初始化可支持51 32等多平臺(tái)單片機(jī)

RackNerd：全場(chǎng)VPS/虛擬主機(jī)7.5折優(yōu)惠，特價(jià)VPS套餐$9.49/年起

圖片放大鏡注釋詳解

如何使用純 CSS 制作四子連珠游戲

前端每日實(shí)戰(zhàn)：130# 視頻演示如何用 CSS 在線字體和 D3 創(chuàng)作一個(gè) Google &

前端每日實(shí)戰(zhàn)：96# 視頻演示如何用純 CSS 和 D3 創(chuàng)作一艘遨游太空的宇宙飛船

基于JS快速生成各種網(wǎng)格布局工具Grid介紹

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！