webpack基本属性配置

最新推荐文章于 2025-01-18 23:38:34 发布

六六子大顺1

最新推荐文章于 2025-01-18 23:38:34 发布

阅读量364

点赞数

本文深入解析Webpack的基本属性配置，包括入口(entry)、出口(output)、模块(module)规则(rules)及加载器(loaders)，并介绍了如何使用插件(plugin)进行模板文件的处理。通过具体示例，帮助读者理解Webpack构建流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack 基本属性配置

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

const path = require('path')
module.exports = {
    entry: { // main是默认入口，也可以是多入口
        main: './src/main.js'
    },
    // 出口
    output: {
        filename: './build.js', // 指定js路径
        path: path.join(__dirname, '..', '', 'dist') // 最好是绝对路径
        // 代表上一级的dist
    },
    module: {
        // 一样的功能rules: webpack2.xx新加的
        loaders: [ // require('./a.css||./a.js')
            {
                test: /\.css$/,
            	loader: 'style-loader!css=loader',
                //多个loader用!分割
                //顺序是反过来的 2!1  多个loader
            },
            {
                test: /\.(jpg|svg)$/,
                loaderL 'url-loader?limit=4096&name=[name].[ext]',
                // limit=4096&name=[name].[ext]' 多个参数之间用&符号分割
                //[name].[ext]内置提供的
                options: {
                    limit: 4096,
                    name: '[name].[ext]'
            	}
            }
        ]  
    },
    plugins: [
        // 插件的执行顺序是依次执行的，和loader是反过来的
        new htmlWebpackPlugin({
            template: './src/index.html',
        })
        // 将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录。
        // 在插件的执行过程中，它本身可以去拿当前所设置的webpack选项，便于对webpack选项的复用，
    ]
}