webpack

yarn安装

npm install -g yarn
//检测yarn
yarn -v

使用yarn安装 webpack

yarn add webpack webpack-cli --dev

//打包
npx webpack

css样式loader安装

yarn add --dev style-loader css-loader

webpack插件使用

　　自动生成index.html插件

yarn add html-webpack-plugin --dev

　　babel-loader插件

yarn add --dev babel-loader @babel/core @babel/preset-env

　　代码压缩插件

yarn add --dev terser-webpack-plugin

　　自动打包

yarn add --dev webpack-dev-server

　　查看代码体积大小分布图

yarn add --dev webpack-bundle-analyzer

 

文件目录

 webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const BundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
    // 设置所处环境 production生产环境 development开发环境
    mode: "development",
    // 方便查看打包后的源代码
    devtool: "inline-source-map",
    // 入口文件
    entry: "./src/index.js",
    // 打包输出文件配置 
    output: {
        // 打包后的文件名
        filename: "dist.js",
        // 存放路径
        path: path.resolve(__dirname, "dist")
    },
    // 设置文件路径别名
    resolve: {
        alias: {
            // utils:path.resolve(__dirname,"src/utils")
        }
    },
    // 代码压缩插件
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()]
    },
    // 代码有改动重新自动打包
    devServer: {
        static: "./dist",
    },
    // 插件 自动生成index.html HtmlWebpackPlugin
    plugins: [new HtmlWebpackPlugin({
        title: "博客列表"
    }),
        // new BundleAnalyzer() // 查看代码体积分布图
    ],
    module: {
        // 数组立的每个元素都对应一个loader，每个loader都包含匹配扩展名和使用loader相关的选项
        rules: [{
            // 匹配文css件名
            test: /\.css$/i,
            use: ["style-loader", "css-loader"]
        }, {
            // 匹配图片文件名 图片通过引入的方式查找路径来使用图片 
            test: /\.(pang|svg|jpg|jpeg)$/i,
            type: "asset/resource"
        }, {
            // 匹配js文件
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                // 兼容低版本浏览器，使用babel工具转译代码
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"],
                }
            }
        }]
    }
};