entry参数
entry可以是string(单入口),可以是object(多入口),多页面应用,请务必使用object,因为object中的key在webpack里相当于此入口的name,既可以后续用来拼生成文件的路径,也可以用来作为此入口的唯一标识,单页面应用使用string即可。
- 以多页面应用为例:
entry: { // pagesDir是前面准备好的入口文件集合目录的路径 ------ ./src
'index/login': path.resolve(pagesDir, `./index/login/page`),
'index/index': path.resolve(pagesDir, `./index/index/page`),
},
对照目录结构
├─src # 当前项目的源码
├─pages # 各个页面独有的部分,如入口文件、只有该页面使用到的css、模板文件等
│ ├─index # 业务模块
│ │ ├─index # 具体页面
│ │ └─login # 具体页面
├─dist
├─webpack.config.js
output参数
output参数里有这几个子参数是比较常用的:path、publicPath、filename、chunkFilename
output: {
path: path.resolve(__dirname, './dist'), //表示生成文件的根目录下的dist(__dirname是当前文件目录)
publicPath: './dist/', //publicPath参数表示的是一个URL路径(指向生成文件的根目录),用于生成css/js/图片/字体文件等资源的路径,以确保网页能正确地加载到这些资源。
filename: '[name]/entry.js', // 批量指定生成后文件的名称 ./dist/ index/login/entry.js 和 ./dist/index/index/entry.js
chunkFilename: '[id].bundle.js',//chunkFilename参数指定的是除入口文件外的chunk的命名
},
- 以单页面应用为例:
entry:'./entry.js',//入口文件,每有一个键值对,就是一个入口文件 值可以是一个数组
output:{//配置打包结果
path:path.resolve(__dirname, './dist')//定义了输出的文件夹 当前目录
filename:'bundle.js'//定义打包结果文件名称
},
对照目录结构
├─src # 当前项目的源码
├─entry# 业务模块
├─dist
├─webpack.config.js