Webpack包教不包會

harriszh 發(fā)布于2019-08-23 18:35 / 3375人閱讀

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

Webpack是什么？

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

簡單來說 Webpack就是一個前端項目的打包工具，精簡一下就是：Webpack就是個工具

WebPack打包方式有什么特點？

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

WebPack的常用配置是什么？

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

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

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

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

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

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

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

context: 基礎(chǔ)目錄，絕對路徑，用于從配置中解析入口起點(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"]
}

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

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

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

filename: 文件名稱可以類似static/[name].js這樣書寫，可以增加一個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的怎么動態(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 模塊語法（即 import 和 export）。 確保沒有 compiler 將 ES2015 模塊語法轉(zhuǎn)換為CommonJS 模塊（這也是流行的 Babel preset 中 @babel/preset-env 的默認(rèn)行為 - 更多詳細(xì)信息請查看 文檔）。 在項目 package.json 文件中，添加一個 "sideEffects" 屬性。 通過將 mode 選項設(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"]
}
};