Webpack包教不包會(huì)

gaara 發(fā)布于2019-08-02 15:30 / 3005人閱讀

摘要：是什么本質(zhì)上，是一個(gè)現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器。當(dāng)處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)。通過(guò)將選項(xiàng)設(shè)置為，啟用代碼壓縮和。

Webpack是什么？

本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。 ——Webpack文檔

簡(jiǎn)單來(lái)說(shuō) Webpack就是一個(gè)前端項(xiàng)目的打包工具，精簡(jiǎn)一下就是：Webpack就是個(gè)工具

WebPack打包方式有什么特點(diǎn)？

WebPack以JavaScript為入口（entry）；通過(guò)不同的loader，處理不同格式的資源（file資源file-loader/url-loader，css資源style-loader/css-loader，JavaScript資源babel-loader，等）；通過(guò)html-webpack-plugin動(dòng)態(tài)生成html文件并插入CSS、JavaScript資源；通過(guò)output配置已經(jīng)處理過(guò)的文件，包括文件的名稱（filename）、生成文件放置位置（path)、線上資源服務(wù)路徑（publicPath），非入口文件名稱（chunkFilename）等。

WebPack的常用配置是什么？

entry WebPack的入口，打包入口文件的配置

output Webpack的出口，輸出打包后的文件配置

mode 配置的模式 development (開發(fā)模式) / production（生產(chǎn)模式） / none

module 模塊的處理方式在這里使用各種loader處理不同的資源

plugins WebPack常用的一些插件包括動(dòng)態(tài)生成Html，將CSS生成文件等等

devtool 調(diào)試方式 source-map等，

resolve 設(shè)置模塊如何被解析 alias 地址簡(jiǎn)寫 extensions 后綴自動(dòng)查找等

context: 基礎(chǔ)目錄，絕對(duì)路徑，用于從配置中解析入口起點(diǎn)(entry point)和 loader

WebPack的entry配置有幾種常用方式？

1 "./index.js"
2 {
     index: "./index.js"
 }
3 ["webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true", "./index.js"]
4 {
    index: ["webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true",
    , "./index.js"]
}

第二種常在打包生成上線文件時(shí)使用，第四種模式在多頁(yè)面需要進(jìn)行HMR時(shí)，
第三種模式在進(jìn)行SPA頁(yè)面開發(fā)時(shí)，或者在優(yōu)化多頁(yè)面HMR過(guò)程，HtmlWebpackPlugin生成Html文件比較耗時(shí)，這時(shí)可以專注于當(dāng)前開發(fā)的頁(yè)面，即只打包當(dāng)前開發(fā)的頁(yè)面，減少需要重新生成的文件。

WebPack的output配置有幾種參數(shù)？

 output: {
        filename: "static/[name].js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/"，
        chunkFileName: ""
    }

filename: 文件名稱可以類似static/[name].js這樣書寫，可以增加一個(gè)static文件夾
path 輸出的路徑
publicPath 服務(wù)器防止資源文件的路徑
chunkFileName 非入口文件
WebPack的mode配置有幾種設(shè)置？

production development none

如果不設(shè)置，按照production方式

WebPack的常用module怎么配置？

module: {
    rules: [
        {
            test: /.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // you can specify a publicPath here
                        // by default it uses publicPath in webpackOptions.output
                        hmr: process.env.NODE_ENV === "development",
                    },
                },
                "css-loader"
            ]
        },
        {
            test: /.(png|jpg|gif|svg)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "images",
                    }
                }
            ]
        },
        {
            test: /.(woff|woff2|eot|ttf|otf)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "fonts"
                    }
                }
            ]
            {
            test: /.html$/,
            loader: [
                "html-loader"
            ]
        }
        }
    ]
}

還有bable-loader ，url-loader, postcss-loader，less-loader，vue-loader，sass-loader等等

WebPack的怎么動(dòng)態(tài)生成html并插入資源文件（css，js）？

return new HtmlWebpackPlugin({
            filename: `${fileName}.html`,
            template: "./template.html",
            inject: true,
            chunks: [`${fileName}`, "vendor"],
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                useShortDoctype: true,
                trimCustomFragments: true,
                removeTagWhitespace: true,
                removeStyleLinkTypeAttributes: true,
                removeScriptTypeAttributes: true,
                removeRedundantAttributes: true
            }
   });

使用HtmlWebpackPlugin

WebPack怎么tree-shake？

使用 ES2015 模塊語(yǔ)法（即 import 和 export）。 確保沒(méi)有 compiler 將 ES2015 模塊語(yǔ)法轉(zhuǎn)換為CommonJS 模塊（這也是流行的 Babel preset 中 @babel/preset-env 的默認(rèn)行為 - 更多詳細(xì)信息請(qǐng)查看 文檔）。 在項(xiàng)目 package.json 文件中，添加一個(gè) "sideEffects" 屬性。 通過(guò)將 mode 選項(xiàng)設(shè)置為production，啟用 minification(代碼壓縮) 和 tree shaking。

WebPack怎么設(shè)置模塊熱更新？

devServer: {
        contentBase: "./dist",
        compress: true,
        hot: true
    },

使用webpack-dev-middlemare webpack-hot-middlemare
server端

const express = require("express");
const webpack = require("webpack");

const app = express();

const webpackConfig = require("./webpack.config");
const compiler = webpack(webpackConfig);

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath
}));

app.use(require("webpack-hot-middleware")(compiler));

app.listen(3000, () => {
    console.log(3000);
});

webpack entry配置

const hotMiddlewareScript = "webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true";

{
    index: ["hotMiddlewareScript",  "./index.js"]
}

Talk is cheap. Show me the code

安裝Webpack環(huán)境

mkdir learn-webpack && cd learn-webpack
npm init -y
npm install webpack webpack-cli --save-dev
touch webpack.config.js

webpack.config.js :

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const glob = require("glob");
const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const getEntries = () => {
    return glob
        .sync("src/**/*.js")
        .map(url => `./${url}`);
};

const getEntryNames = () => {
    const PRE_STR = "./src/";
    const entries = {};

getEntries()
    .forEach(url => {
        const removeExtUrl = url.replace(/.js$/ig, "");
        const fileParamsWithPath = removeExtUrl.slice(PRE_STR.length).split("/");
        entries[fileParamsWithPath.join("-")] = url.replace(/.js$/, "");
    });

return entries;
};

console.log(getEntryNames());

const getWebpackHtmls = () => {
    const PRE_STR = "./src/";

return getEntries()
    .map(url => {
        const removeExtUrl = url.replace(/.js$/ig, "");
        const fileParamsWithPath = removeExtUrl.slice(PRE_STR.length).split("/");
        const fileName = fileParamsWithPath.join("-");

        return new HtmlWebpackPlugin({
            filename: `${fileName}.html`,
            template: "./template.html",
            inject: true,
            chunks: [`${fileName}`, "vendor"],
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                useShortDoctype: true,
                trimCustomFragments: true,
                removeTagWhitespace: true,
                removeStyleLinkTypeAttributes: true,
                removeScriptTypeAttributes: true,
                removeRedundantAttributes: true
            }
        });
    });
};

module.exports = {
    entry: getEntryNames(),
    output: {
        filename: "static/[name].js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "/",
        chunkFilename: "static/vendor.js"
    },
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        splitChunks: {
            name: "vendor",
            chunks: "all",
            minChunks: 1
        }
    },
mode: "production",
module: {
    rules: [
        {
            test: /.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // you can specify a publicPath here
                        // by default it uses publicPath in webpackOptions.output
                        hmr: process.env.NODE_ENV === "development",
                    },
                },
                "css-loader"
            ]
        },
        {
            test: /.(png|jpg|gif|svg)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "images",
                    }
                }
            ]
        },
        {
            test: /.(woff|woff2|eot|ttf|otf)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "fonts"
                    }
                }
            ]

        },
        {
            test: /.html$/,
            loader: [
                "html-loader"
            ]
        }
    ]
},
plugins: [
    new CleanWebpackPlugin({
        dry: false,
        dangerouslyAllowCleanPatternsOutsideProject: true
    }),
    ...getWebpackHtmls(),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "style/[name].css",
        chunkFilename: "style/[id].css",
    }),
    new webpack.ProvidePlugin({
        join: ["lodash", "join"]
    })
],
resolve: {
    alias: {
        "@": path.resolve("./src")
    },
    extensions: [".js", ".jsx", ".css", ".less", ".json", "scss", ".vue"]
}
};

云服務(wù)器 GPU云服務(wù)器包教不包會(huì) 包學(xué)包會(huì) webpack _webpack

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

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

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

登陸后可評(píng)論

0條評(píng)論

gaara

男|高級(jí)講師

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

TA的文章

tensorflow升維

閱讀 2997·2023-04-26 02:25
tensorflow降版本

閱讀 2267·2023-04-25 18:05
AlphaVPS：大硬盤VPS年付15歐元起(或€2/月),AMD EYPC+NV

閱讀 662·2021-09-30 09:57
RackNerd：美國(guó)vps,洛杉磯紐約機(jī)房,4核/8GB/100G SSD/5TB流量,$89/年

閱讀 2955·2021-09-27 14:10
轉(zhuǎn)：CSS :placeholder-shown偽類實(shí)現(xiàn)Material Design占位符交互效果

閱讀 1669·2019-08-30 15:44
HTML 3-列表、表單、語(yǔ)義化

閱讀 1016·2019-08-29 15:28
前端編年史（持續(xù)更新中）

閱讀 2543·2019-08-29 14:10
成長(zhǎng)小筆記

閱讀 2272·2019-08-29 13:30

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

資訊專欄INFORMATION COLUMN

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

Webpack包教不包會(huì)

相關(guān)文章