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...

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章