webpack(四)---开发系列
一、 source map
devtool: 'inline-source-map'
现在,让我们来做一些调试,在 print.js
文件中生成一个错误:
src/print.js
export default function printMe() {
- console.log('I get called from print.js!');
+ cosnole.error('I get called from print.js!');
}
![](https://img2018.cnblogs.com/blog/857884/201909/857884-20190924222910970-558094275.jpg)
二、使用观察模式
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch",
"build": "webpack"
},
自动打包
现在,你可以在命令行中运行 npm run watch
,就会看到 webpack 编译代码,然而却不会退出命令行。这是因为 script 脚本还在观察文件
三、用 webpack-dev-server
webpack-dev-server
为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。让我们设置以下:
npm install --save-dev webpack-dev-server
webpack.config.js
devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist'
+ },
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
四、使用 webpack-dev-middleware
webpack-dev-middleware
是一个容器(wrapper),它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server
在内部使用了它,同时,它也可以作为一个单独的包来使用,以便进行更多自定义设置来实现更多的需求。接下来是一个 webpack-dev-middleware 配合 express server 的示例。
首先,安装 express
和 webpack-dev-middleware
:
npm install --save-dev express webpack-dev-middleware
亲测直接按照官网做好了没有坑
https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-source-map