webpack之entry

最新推荐文章于 2023-11-01 08:41:22 发布

高石石石

最新推荐文章于 2023-11-01 08:41:22 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/gaolee1993/article/details/76201011

React 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Webpack中entry配置的三种形式：字符串、对象和数组。详细解释了如何通过这些配置指定项目入口文件，以及如何利用[name]变量来动态生成输出文件名。

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

一般情况下使用webpack对于entry属性只是设置一个路径+文件名

//输入当前路径下的app.js文件，输出到output文件夹下output-file.js
module.exports = {
    //路径path.join(__dirname, '/app.js')
    entry: './app.js',
    output: {
        path: './output',
        filename: 'output-file.js'
    }
}

其实entry有三种形式，除了上面用字符串，还可以使用对象和数组

对象entry

对象entry是最完整的形式，对象中的每一对属性对，都代表着一个入口文件。

key

key可以是简单的字符串，比如：’app’, ‘main’, ‘entry-1’等。并且对应着output.filename配置中的[name]变量

    entry: {
        //输入的是app.js文件
        'app-entry': './app.js'
    },
    output: {
        path: './output',
        //[name]是app-entry，输出的文件是output目录下的app-entry.js
        filename: '[name].js'
    }

key还可以是路径字符串。此时webpack会自动生成路径目录，并将路径的最后作为[name]

entry: {
    //输入app.js和deep-app.js文件
    'path/of/entry': './deep-app.js',
    'app': './app.js'
},
output: {
    //在output目录下生成app.js和output->path->of->entry.js
    path: './output',
    filename: '[name].js'
}

value

value如果是字符串，而且必须是合理的node(require)函数参数字符串

//value如果是数组
entry: {
    main:'./app.js',
    vendor: ['jquery', 'lodash']
}

数组entry

entry: ['./app.js', 'lodash']
//等价于下面的对象形式：
entry: {
    main: ['./app.js', 'lodash']
}