Vue學習17-----webpack的基本應用之運行後自動打開瀏覽器

1、安裝預覽插件

npm i html-webpack-plugin -D

2、webpack.config.js下配置

//導入生成預覽頁面的插件，得到一個構造函數
const HtmlWebpackPlugin = require('html-webpack-plugin')
//創建插件的實例對象
const htmlPlugin = new HtmlWebpackPlugin({
    //指定要用到的模板
    template:'./src/index.html',
    //指定生成的文件的名稱，文件存在內存中，在目錄中不顯示
    filename:'index.html'
})

module.exports = {
    //plugins是個數組，是webpack打包期間會用到的一些插件列表
    plugins:[htmlPlugin]
}

3、package.json下配置

    // --open 打包完成後自動打開瀏覽器頁面
    // --host 配置Ip地址
    // --port 配置端口
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080"
  },