webpack配置详解 - 29.entry

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

文档: https://www.webpackjs.com/concepts/entry-points/

 

1.文件结构

 

 

2.代码

add.js

function add(x, y) {
    return x + y
}

export default add

count.js

function count(x, y) {
    return x - y
}

export default count

index.js

// import add from './add'
// import count from './count'

console.log('index.js文件加载了')

// console.log(add(1, 2))
// console.log(count(5, 3))

webpack.config.js

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

/*
    entry: 入口起点
        1. string --> './src/index.js'
            打包形成一个chunk。 输出一个bundle文件 (built.js)。
            此时，chunk 的默认名称是 main

        2. array  --> ['./src/index.js', './src/add.js']
            多入口
            所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
                --> 只有在HMR功能中让html热更新生效~

        3. object -->
            多入口
              有几个入口文件,就形成几个chunk，就会输出几个bundle文件
              此时chunk的名称是 key

        --> 特殊用法
            {
              // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
              index: ['./src/index.js', './src/count.js'],
              // 形成一个chunk，输出一个bundle文件。
              add: './src/add.js'
            }

* */

module.exports = {
    // entry: './src/index.js',//string
    // entry: ['./src/index.js','./src/count.js'],//array
    // entry: {index: './src/index.js', add: './src/count.js'},//object
    entry: {
        index: ['./src/index.js', './src/count.js'],
        add: './src/add.js'
    },//特殊用法
    output: {
        filename: "[name].js",
        path: resolve(__dirname, 'build')
    },
    plugins: [new htmlWebpackPlugin()],
    mode: 'development'
}

3.打包

$ webpack