配置打包的入口與出口

const path = require('path') // 導(dǎo)入 node.js 中專門操作路徑的模塊

module.exports = {

? entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路徑

? output: {

? ? path: path.join(__dirname, './dist'), // 輸出文件的存放路徑

? ? filename: 'bundle.js' // 輸出文件的名稱

? }

}

---

---

---

---

配置 webpack 的自動打包功能

① 運(yùn)行 npm install webpack-dev-server –D 命令，安裝支持項(xiàng)目自動打包的工具 ② 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {

"dev": "webpack-dev-server" // script 節(jié)點(diǎn)下的腳本，可以通過 npm run 執(zhí)行

}

③ 將 src -> index.html 中，script 腳本的引用路徑，修改為 "/buldle.js“ ④ 運(yùn)行 npm run dev 命令，重新進(jìn)行打包 ⑤ 在瀏覽器中訪問 http://localhost:8080 地址，查看自動打包效果 注意： ? webpack-dev-server 會啟動一個(gè)實(shí)時(shí)打包的 http 服務(wù)器 ? webpack-dev-server 打包生成的輸出文件，默認(rèn)放到了項(xiàng)目根目錄中，而且是虛擬的、看不見的

---

總結(jié)

以上是生活随笔為你收集整理的webpack 的基本使用——配置打包的入口与出口||配置 webpack 的自动打包功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。