webpack學習！lession2

  一、安裝以及使用webpack-dev-server工具

    1.1安裝webpack-dev-server

npm i webpack-dev-server html-webpack-plugin --save-dev

    1.2修改webpack-dev-config這個配置文件

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:"./src/index.js",
    output:{
        path:__dirname,
        filename:"./release/bundle.js"
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'./index.html' /選擇插入模板的html文件
        })
    ],
    devServer:{
        contentBase: path.join(__dirname,'./release'), 
        open: true, //自動打開瀏覽器
        port: 8000 //打開的端口
    }
}

    1.三、在package.json中修改運行腳本

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "webpack-dev-server --config webpack-dev-config.js --mode development"
  }

當再運行npm run pack 時，就能夠自動打開默認瀏覽器，開啓端口爲loaclhost:8000的端口，而且會將

<script src=""./release/bundle.js><script>

插入到頁面中