webpack

2022-08-10 22:32:58 阅读：162 来源： 互联网

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"],
                }
            }
        }]
    }
};

标签：--,add,dev,loader,webpack,yarn
来源： https://www.cnblogs.com/i269/p/16573941.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack