webpack-基础使用

webpack是一个大包工具

五大核心

1. entry（入口）指示从那个文件开始大包
2. ououput（输出）指示webpack打包完的文件输出到哪里去，如何命名等
3. loader（加载器）webpack本身只能处理js、json等资源，其他资源需要借助laoder、webpack才能解析
4. plugin（插件），扩展webpack功能
5. moded（模式）

• 开发模式：development
• 生产模式：production

配置文件

webpack.config.js一定位于根目录下

const path = require("path")
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
        
        // 原理：在大凹钱，将path整个目录的内容清空，再进行打包
        clean: true
    },
    module: {
        rules: []
    },
    plugin: [],
    mode: "development"
}

开发模式

开发模式顾名思义就是我们开发代码事的使用的模式。 这个模式下我们主要做两件事

1. 编译代码，使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们加载配置来编译这些资源
2. 代码质量检测，树立代码规范 提前检查代码的一些隐患，让代码运行时能更加健壮
   提前检查代码规范和格式，统一团队编码风格，让代码更加优雅美观

处理样式资源

webpack本身不能识别样式资源，所以我们需要借助Loader来帮助webpack编译sass. 一般来说用到的loader有 ：style-loader、css-loader、stylus-loader、sass-loader

module.exports = {
    ……
    modules: {
         rules: [
             {
                 test: /\.css$/,
                 use: [
                     "style-loader",
                     "css-loader"
                 ]
             }
         ]
    }
    ……
}

将css单独大包成文件

1. npm install --save-dev min-css-extract-plugin
2. 修改打包配置，将style-loader改为MinCssExtractPluin.loader

const MinCssExtractPluin = require('min-css-extract-plugin');
module.exports = {
    ……
    modules: {
         rules: [
             {
                 test: /\.css$/,
                 use: [
                     MinCssExtractPluin.loader,
                     "css-loader"
                 ]
             }
         ]
    },
    plugin: [
        new MinCssExtractPluin({
            filename: "static/css/main.css"
        })
    ]
    ……
}

图片处理

webpack5已经内置 url-lader和file-loader

module.exports = {
    ……
    modules: {
         rules: [
             {
                 test: /\.(jpg|jpeg|gif|png|webp)$/,
                 type: "asset",
                 parser: {
                     dataUrlCondition: {
                         maxSize: 10 * 1024
                     }
                 },
                 generator: {
                     // 指定输出文件名称
                     filename: "static/images/[hash:10][ext][query]"
                 }
             }
         ]
    }
    ……
}

处理字体图标

module.exports = {
    ……
    modules: {
         rules: [
             {
                 test: /\.(ttf|woff2)$/,
                 type: "asset/resource",
                 parser: {
                     dataUrlCondition: {
                         maxSize: 10 * 1024
                     }
                 },
                 generator: {
                     // 指定输出文件名称
                     filename: "static/media/[hash:10][ext][query]"
                 }
             }
         ]
    }
    ……
}

插件

const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    ……
    plugin: [
        new ESLintPlugin({
            context: path.resolve(__dirname, "src")
        }),
        new HtmlWebpckPlugin({
            template: path.resolve(__dirname, "public/index.html")
        })
    ]
    ……
}

开发服务器&自动化

module.exports = {
    ……
    devServer: {
        host: "localhost",
        port: "3000",
        open: true
    }
    ……
}