webpack入门

September 12, 2022

webpack 的核心是一个 js 打包器，也可以打包其它前端资源

文档：https://webpack.js.org/concepts/
中文：https://webpack.docschina.org/concepts/
参考：http://webpack.wuhaolin.cn/

安装

npm install webpack webpack-cli --save-dev
# or
npm i -D webpack webpack-cli

package.json 一般如下配置

json

{
    "private": true,
    "scripts": {
        "build": "webpack",
        "watch": "webpack --watch"
    }
}

一般有如下目录结构

|-- src/
|-- dist/
|-- package.json
|-- webpack.config.js

重要概念

Entry & Output & Chunk

entry 指定模块的入口（可以是一个文件，也可以是多个）
output 指定输出

const path = require("path");
module.exports = {
    // context: path.resolve(__dirname, "app"),
    entry: "./src/index.js",
    entry: {
        index: "./src/index.js",
        print: "./src/print.js",
    },
    output: {
        // filename: "bundle.js",
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist"), // 指定输出文件目录
        // clear: true,
    },
};

chunk 根据 entry 和动态导入 import() 得到，一个 chunk 对应一个生成的文件

Module & Loader

module 配置如何处理模块
loader 则是模块转换器

module.exports = {
    /* ... ... */
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ["babel-loader?cacheDirectory"],
                include: path.resolve(__dirname, "src"),
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"],
                exclude: path.resolve(__dirname, "node_modules"),
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: "asset/resource",
            },
        ],
    },
};

Plugin

plugin 可插入 webpack 的各种生命周期，因此可以实现各种功能
每个 plugin 的配置则与具体插件相关

插件需要安装，例如 npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "[name].[hash].js",
    },
    plugins: [
        // 这个插件会在指定的输出目录下生成 index.html，其中会自动引入构建产物
        new HtmlWebpackPlugin({
            title: "Webpack Demo",
        }),
    ],
};

其他概念

Development

mode 设置为 "development" 则调整为开发模式

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: {
        index: "./src/index.js",
        print: "./src/print.js",
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Development",
        }),
    ],
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist"),
        clean: true,
    },
};

需要的

https://webpack.docschina.org/loaders/babel-loader/
https://webpack.docschina.org/loaders/postcss-loader/
https://webpack.docschina.org/plugins/terser-webpack-plugin/

←Back to home