webpack基于react的深度配置

接着上一篇使用webpack配置正确的react项目 深入配置

在服务器上使用：

1. 生产环境 webpack -pw
2. 开发环境 webpack-dev-server

安装环境 - 全局安装（安装过就无需再次安装）

npm i webpack-dev-server -g

开发环境运行

使用时直接在命令中输入 webpack-dev-server即可

如果想要更改访问的端口号则输入： webpack-dev-server --port 2999 浏览器访问：localhost:2999

优点：修改内容保存后可直接在浏览器看到效果，不需要多次运行

端口号也可在webpack.config.js中直接修改配置：

devServer:{
    port:1289, // 端口配置
    open:true, // 运行就直接在浏览器打开，默认false
    inline:true, // 自动刷新，默认true
    contentBase:'./app', // 指定服务器目录
}

指定服务器目录示例：

1. 在根目录（webpack.config.js所在目录）新建一个app文件夹
2. 将index.js和index.html放入app文件夹
3. 然后在webpack.config.js文件配置 contentBase:'./app'
4. entry入口文件修改成 entry:'./app/index.js'
5. 运行webpack：webpack-dev-server，打开浏览器查看也能正常显示

源码地址：https://github.com/luojiao123/webpack-2/tree/master

 

完！