webpack学习之 入口和输出笔记

一 入口基础

1 入口写法

入口分为单入口和对象语法。通用写法：entry:{entryChunckName:String|Array<String>}

单入口语法：  

const config = {
    entry:{
        main:'./src/app.js'
    }
}

简写如下：

const config={
    entry:'./src/app.js'
}

对象语法：

const config={
    entry:{
        app:'./src/app.js',
        vendors:'./src/vendors.js'
    }   
}

 

2 使用场景

1> 应用程序和第三方入口分离场景

const config={
    entry:{
        app:'./src/app.js',
        verdors:'./src/verdor.js'
    }
}

2> 多页面应用场景：

   优点：可用commonChunkPlugin多个页面共享bundle部分代码

const config = {
    entry:{
        pageOne:'./src/pageOne/index.js',
        pageTwo:'./src/pageTwo/index.js',
        pageThree:'./src/pageThree/index.js',
    }
}

 

二 输出模块基础

应用程序可以有多个入口，但是只能有一个输出配置。

1 用法

   基本内容包括文件名和文件的绝对路径。如下：

const config = {
    output:{
        fileName:'bundle.js',
        path:'/home/project/public/assets'
    }
}

2 多入口例子

     以下例子就是两个入口，分别输出到 _dirname/dist/[name].js，即./dist/app.js和./dist/search.js

const config = {
    entry:{
        app:'./src/app.js',
        search:'./src/search.js'
    },
    
    output:{
        filename: '[name].js',
        path: _dirname+'/dist'
    }
}

以上内容均是webpack官网的内容提炼，版权归属原页面。