1、建立乙個js 為webpack.config.js檔案 ,該檔案是webpack的配置檔案
webpack.config.js
module.exports=, //入口檔案的配置項
output:{}, //出口檔案的配置項
module:{}, //模組:例如解讀css,如何轉換,壓縮
plugins:, //外掛程式,用於生產模版和各項功能
devserver:{}//配置webpack開發服務功能
}
plugins:配置外掛程式,根據你的需要配置不同功能的外掛程式。
devserver:配置開發服務功能,後期我們會詳細講解。
entry選項(入口配置)
//入口檔案的配置項
entry:,
output選項(出口配置)//出口檔案的配置項
output:,
現在webpack.config.js的**:const path = require('path');
module.exports=,
//出口檔案的配置項
output:,
module:{},
//外掛程式,用於生產模版和各項功能
plugins:,
//配置webpack開發服務功能
devserver:{}}
最後在終端中輸入webpack進行打包
多入口、多出口配置:
const path = require('path') //path是乙個常量不能更改 ,path 需要引入
var webpack = require('webpack')
module.exports = ,
// bundle輸出
output: ,
module:{},
plugins:,
devserver:{}
}
注意:修改了兩個地方:入口和出口修改
[name]的意思是根據入口檔案的名稱,打包成相同的名稱,有幾個入口檔案,就可以打包出幾個檔案。
webpack 入口和出口檔案的簡單配置
const path require path const htmlwebpackplugin require html webpack plugin 引入自動生成新的html後可自動引入相關出口js檔案的外掛程式 const require clean webpack plugin 引入自動刪除上...
webpack3 配置多入口和多出口
我們之前寫到的webpack.config.js,具體 如下 module.exports 上面的entry 和 output 就是單一的入口和出口。下面我們建立乙個多入口,多出口的例項。1.新建資料夾 page,並在該資料夾下面建立index.html和signup.html2個檔案 index....
webpack的多入口多出口配置手記
webpack.prod.js檔案配置 let path require path let htmlwebpackplugin require html webpack plugin let require clean webpack plugin module.exports output plu...