01-基础概念

webpack的五个基本概念

一、entry

该值让webpack知道应使用那个模块开始构建其内部的依赖关系图。
webpack将会根据entry依赖于哪些模块和库

1.1、根据入口的多少来划分分为单入口和多入口

1.1.1、单入口书写方式

//方式一 
module.exports={ 
    entry:'./src/index.js', 
} 
//方式二 
module.exports={ 
    entry:['./src/index.js'], 
} 
//方式三 
module.exports={ 
    entry:{ main:'./src/index.js' }, 
} 
//方式四 
module.exports={ 
    entry:{ main:['./src/index.js'], }, 
} 
//函数的方式（主要是看函数的返回是String | Array | Object类型）
module.exports = { 
    entry: () => './src/index.js' 
};

1.1.2、多入口书写方式

//方式一 
    module.exports={ 
        entry:['./src/index.js','./src/about.js'],
    } 
//方式二 
    module.exports={ 
        entry:{ 
                index:'./src/index.js', 
                about:'./scr/about.js' 
         }, 
     } 
//方式三 
    module.exports={ 
        entry:{ 
            main:['./src/index.js','./scr/about.js'], 
        }, 
    } 
//方式四：函数的方式（主要是看函数的返回是String | Array | Object类型） 
    module.exports = { 
        entry: () => './src/index.js' 
    };

二、output

    该值让webpack如何以及在那个位置输出打包之后的文件
    主要根据entry是单个入口还是多个入口来进行输出

2.1、单个入口(单个出口)

const path = require('path'); 
//方式一
module.exports={ 
                entry:'./src/index.js', 
                output:{ 
                    filename:"[name].js",
                    path: path.resolve(__dirname, '../dist'), 
              } 
           } 
// 写入到硬盘：../dist/main.js 
//方式二 
module.exports={ 
                entry:['./src/index.js'], 
                output:{ 
                    filename:"[name].js", 
                    path: path.resolve(__dirname, '../dist'), 
                } 
             } 
 // 写入到硬盘：../dist/main.js 
 //方式三 
  module.exports={ 
              entry:{ 
                  index:['./src/index.js'] 
              }, 
               output:{ 
                   filename:"[name].js", 
                   path: path.resolve(__dirname, '../dist'), 
               } 
        } 
// 写入到硬盘：../dist/index.js ...

2.2、多页面应用打包（多个入口对应多个出口）

const path = require('path'); 
    module.exports={ 
        entry:{ 
                index:'./src/index.js',
                about:'./src/about.js' 
          }, 
        output:{ 
                filename:"[name].js", 
                path: path.resolve(__dirname, '../dist'), 
            } 
          } 
       // 写入到硬盘：../dist/index.js、：../dist/about.js

demo

//好奇了一下
//多个入口打包成一个出口如何实现？？？？
const path = require('path'); 
    module.exports={ 
        entry:{ 
              main:['./src/index.js','./src/about.js'],
          }, 
        output:{ 
                filename:"[name].js", 
                path: path.resolve(__dirname, '../dist'), 
            } 
     }
 //目前常规配置；后期在调试其他可能性

三、loaders

webpack 只能理解 JavaScript 和 JSON 文件。
loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，
以供应用程序使用，以及被添加到依赖图中。

四、plugins

plugin是一个扩展器，它丰富了webpack本身,plugins能够被用于执行更广泛的任务比如打包优化、
文件管理、环境注入等…

五、mode

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化