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>

插入到页面中