webpack学习笔记（三）：开发

1.错误跟踪

webpack.config.js中module.exports添加：

devtool: 'inline-source-map'

只建议在开发环境使用，可以追踪到源文件具体错误位置。

2.使用观察模式（--watch）

webpack 观察依赖图中的文件，如果其中一个文件被更新，代码将被重新编译，重新刷新浏览器就可看到变化。

package.json中

"scripts": {
    "start": "webpack-dev-server --open --mode development",
    "watch": "webpack --watch"
  }

npm run watch

3.使用webpack-dev-server

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

强烈建议只在开发环境中使用。

npm install --save-dev webpack-dev-server

webpack.config.js中module.exports添加：

devServer: {
        contentBase: './dist'
    }

package.json中

"scripts": {
    "start": "webpack-dev-server --open --mode development",
    "watch": "webpack --watch",
    "build": "webpack --mode development"
  }

npm start

浏览器会自动打开localhost:8080，并且代码的修改，浏览器会自动更新。

注意：使用webpack-dev-server会把webpack生成的文件放在内存里，所以不会有dist目录或者可见的构建后的文件。