webpack4学习笔记（2）

一、使用配置文件打包

1.新建webpack.config.js文件

2.配置入口 entry (所需打包的文件路径)

3.配置出口output

(1)path：文件打包的存放路径

(2)path.resolve():将路径或者路径片段的序列处理成绝对路径

(3)__dirname:当前文件所在的目录的绝对路径 //注意__dirname这里有两个下划线

(4)filename：打包后文件的名称

配置代码：

const path=require('path');

module.exports={

          entry:'./src/index.js',

          output:{

                      path:path.resolve(__dirname,'build'),

                      filename:'bundle.js'

          }

}

将public文件夹下的index.js文件打包成build文件夹下的bundle.js文件

二、入口entry和出口output的进阶用法

1.入口entry

(1)单入口

单文件 例如 entry："./src/index.js"

多文件 例如 entry：["./src/index.js","./src/index2.js"...]

(2)多入口

例如 entry：{

                    pageOne："./src/pageOne/index.js",

                    pageTwo："./src/pageTwo/index.js"

         }

2.出口output

(1)单出口

output：{

                path：path.resolve(__dirname,"dist"),

               filename:"bundle.js"

}

(2)多出口

output：{

                path：path.resolve(__dirname,"dist"),

                filename:"[name].js" //name对应多入口中的pageOne...

}