1、webpack——核心概念

发布于 2022年 01月 16日 09:59

webpack核心概念:

1、entry (入口)
入口起点 (entry point) 指示 webpack 应该是用于那一模块,来作为构建其内部依赖的开始 
    module.exports = {
        entry:"path/tu/my/entry/file.js"
    }
2、output (出口)
output 属性告诉 webpack 在那里输出他所创建的bundle,以及如何命名这些文件
    const path = require('path')

    module.exports = {
        entry:"path/tu/my/entry/file.js",
        output:{
            // 打包生成此文件夹 (默认名:dist,内部具有带min的js文件)
            path:path.resolve(__dirname,'dist'),
            // 打包生成的文件(在 dist 内)
            filename:'my-first-webpack.bundle.js'
        }
    }
3、loader (处理不同的文件类型)
loader 让 webpack 能够去处理其他类型的文件,并将他们转化为有效的模块
    const path = require('path')

        module.exports = {
            output:{
                // 打包生成的文件(在 dist 内)
                filename:'my-first-webpack.bundle.js'
            },
            module:{
                rules:[{
                    // 正则 找出符合此正则的文件
                    test:/\.txt$/,
                    // 不论什么格式的文件 都以row-loader的格式去处理
                    use:'raw-loader'
                }]
            }
        }

4、plugin (插件)
loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。
    const HtmlWebpackPlugin = require("html-webpack-plugin") // 通过 npm 安装
    const webpack = require("webpack"); // 用于访问内置插件
    
    module.exports = {
        module:{
            rules:[{
                test:/\.txt/,
                use:"raw-loader"
            }]
        },
        plugin:[
            new.HtmlWebpackPlugin({
                template:'./src/index.html'
                })
        ]
    }
5、mode (模式)
    <!--  开发环境     生产环境           -->
通过选择development , production 或 none 来告知webpack使用相应的模式的内置优化。
    module .exports ={
        //      生产环境
        mode:"production"
        //      开发环境
        // mode:"development"
    } 

推荐文章