打包的 輸出文件爲 dist -> main.jshtml
const path = require('path') // 導入 node.js 中專門操做路徑的模塊 path module.exports = { entry: path.join(_dirname,'./src/index.js'),//打包入口文件的路徑 output: { path: path.join(__dirname,'./dist'), // 輸出文件的存放路徑 filename: 'bundle.js' //輸出文件的名稱 } }
npm run dev
打包完成以後,會在 dist 文件夾裏面 會自動生成 bundle.js ,而後 再回到 src -> index.html 中,從新引入 打包以後的 bundle.js 文件,運行 index.html,依然能夠照常運行。node
可是此時咱們會發現,每次 js 更改以後咱們都須要從新手動打包,那要怎麼樣才能是實現自動打包的功能呢?請繼續往下看webpack
npm install webpack-dev-server -D
// package.json 中的配置 "scripts": { "dev": "webpack-dev-server" // script 節點下的腳本,能夠經過 npm run 執行 },
<script src="/bundle.js"></script>
npm run dev
注意:web
須要咱們修改 package.json 文件中 scripts 對象的 dev 的相關參數,具體修改以下:shell
// package.json 中的配置 // --open 打包完成後自動打開瀏覽器頁面 --host 配置 IP地址 --port 配置端口 "scripts": { "dev": "webpack-dev-server --open --host 127.0.0.0 --port 8888" }
修改以後從新運行 npm run dev 命令進行打包會發現項目自動彈出瀏覽器,說明咱們已經配置成功了~npm
可是此時咱們會發現項目雖然正常運行,沒有報錯,但卻不是咱們想要的頁面。
那要怎樣才能夠直接預覽到咱們想要的頁面呢?請繼續往下看json
npm install html-webpack-plugin -D
// 導入生成預覽頁面的插件,獲得一個構造函數 const HtmlWebpackPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlWebpackPlugin({//建立插件的實例對象 template: './src/index.html',// 指定要用到的模版文件 filename: 'index.html'//指定生成的文件的名稱,該文件存在於內存中,在目錄中不顯示 })
module.exports = { plugins: [ htmlPlugin ] //plugin 數組是 webpack 打 包期間會用到的一些插件列表 }
npm run dev
注意:數組