关注各种黑科技
B站UP主,编程教学,游戏玩家,挂B,金牛座

使用webpack打包前端工程8 多入口与输出

多入口主要是entry的配置

先来看之前的情况
默认用src/index.js作为入口,生成dist/main.js

  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }

事实上 等于如下配置

    entry: {
        main: './src/index.js'
    },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }

默认的entry是main 在output里用[name] 自动就产生一个main.js

main也支持一个列表,可以把index.js的内容做一下分离

    entry: {
        main: [
            './src/index.js',
            './src/page.js'
        ]
    },

    output: {
        filename: '[name]bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

最后产生的html里<script type="text/javascript" src="mainbundle.js">

main是必须写的,另外可以有多个入口

    entry: {
        foo: './src/index.js',
        bar: './src/page.js',
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },

生成html如下 包含2个js
<script type="text/javascript" src="foo.js"></script><script type="text/javascript" src="bar.js">

当然我们可能需要一个html对应一个js,暂时不知道怎么写,稍后补充

除了[name] 还有
[hash]
[Chunkhash]
[Contenthash]

转载请注明出处
分享到: 更多 (0)

评论 0