entry和output_output.entry-CSDN博客

本文链接：https://blog.csdn.net/weixin_45133582/article/details/118881277

entry详细说明：

1.当entry是一个字符串时，这个字符串表示需要打包的模块路径.

2.当entry是一个对象：

(1)a.是数组时，当需要将多个模块打包成一个模块，可以使用这个方式，如果这些模块之间不存在依赖，数组中值的顺序没有要求，如果存在依赖，则要将依赖性最高的模块放在最后面.

例如：entry[ "./app/one.js","app/two.js" ]

(2)是键值对形式的对象时，当需要分别打包成多个模块时，可以使用这种方式.

entry:{ module1:"./app/one.js", module2:[ "./app/two.js","./app/three.js" ] }

注：当entry是一个键值对形式的对象时，包名就是键名，output的filename不能是一个固定的值，因为每个包的名字不能一样.

output详细说明：

1.output是一个对象.

2.output.filename：指定输出文件名，一个字符串，当输出一个文件，output.filename为一个确定的字符串.

如：output:{ filename:"build.js" }

当输出多个文件，output.filename不能为一个确定的字符串，为了让每个文件有唯一的名字，需要用到下面：

output.path:指定输出文件的路径，相对路径，一个字符串.

output中还有其他的一些值，可以在webpack的官方网站中获得更多的详细信息.

1.先编写好要打包的模块，并进行打包设置：

const path = require('path');

module.exports = {
  
    mode: 'development',
    entry:{
        header1:"./src/header.js",
        content1:"./src/contet.js"
    },
    output:{
        filename:'[name].min.js',
        path:path.resolve(__dirname,'dist')
    },
    devServer: {
        contentBase: './dist'
    },
    // entry: './src/index.js',
    // output: {
    //     filename: 'bundle.js',
    //     path: path.resolve(__dirname, 'dist')
    // },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {test: /\.js|jsx$/,use: 'babel-loader',exclude: /node_modules/}
           
        ]
    }
};