# webpack

## 1.基本使用

**webpack.config.js**配置好webpack打包的输入与输出文件

```javascript
var path=require("path")
module.exports={
    entry: path.join(__dirname,"forward-project/webpack/src/index.js"),

    output:{
        path:path.join(__dirname,"forward-project/webpack/dist"),
        filename:"bundle.js"
    },
    devServer:{
        host:'0.0.0.0'
    }
}
```

## 2.使用webpack-dev-server自动打包

`npm i webpack-dev-server -g`全局安装

在package.json中配置运行的命令

```
script:{
'dev'  :"webpack-dev-server --hot --disable-host-check --port 8081 --host=0.0.0.0 "

}
//运行webpack-dev-server
npm run dev
```

* \--hot 热重载，只打包文件中修改的部分，加快打包
* \--disable-host-check 不检查hostname 用于外部主机访问
* \--host 指定可以访问的地址
* \--port 端口号
* \--contentBase 指定运行的时展示的根目录

> 在webpack.config.js中进行配置,起到同样的效果

```javascript
        output:{
        path:path.join(__dirname,"forward-project/webpack/dist"),
        filename:"bundle.js"
    },
    devServer:{
        port:8081,
        host:'0.0.0.0',
        disableHostCheck: true,
        contentBase:path.join(__dirname,"forward-project/webpack/"),
        hot:true
    }
}
```

## 参考

1. 解决host=0.0.0.0 <https://zhuanlan.zhihu.com/p/28502711>
