本节文章中仅用于development环境
在开始前首先将mode置为'development'
webpack.config.js
...
module.exports = {
mode: 'development',
...
};
source map使用
当webpack打包源码的时候，由于代码经过了压缩，很难定位到错误在原始代码中的位置。source map可以将编译后的代码映射回原始代码。source map有很多 可用选项,可以根据不同的场景配置。
本文以inline-source-map为例
webpack.config.js
...
module.exports = {
...
devtool: 'inline-source-map',
plugins: [
new HtmlwebpackPlugin({
title: '管理输出'
})
],
...
};
现在在print.js里面故意写一个错误
src/print.js
export default function printMe() {
consloe.log('I get called from print.js!');
}
运行npm run build ，在浏览器里打开index.html，点击按钮，可以在控制台看到错误，以及源代码的位置
选一种模式
在每次编译代码的时候，手动运行npm run build会很麻烦。
webpack提供了几种可选的方式，帮助你在代码发生变化后自动编译代码：
- 1.webpack watch mode(webpack 观察模式)
- 2.webpack-dev-server
- 3.webpack-dev-middleware
使用watch mode(webpack 观察模式)
首先需要添加一个用于启动webpack watch mode 的npm script:
package.json
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
...
}
现在保存文件，webpack自动重新编译。唯一的缺点是，我们需要重新刷新浏览器才能看到修改后的实际效果。
使用webpack-dev-server
webpack-dev-server提供了一个简单的web server，并且具有live reloading（实时重新加载）功能。 首先安装：
npm install webpack-dev-server --save-dev
接着修改配置文件，告诉dev server,从什么位置查找文件：
webpack.config.js
...
module.exports = {
...
devServer: {
contentBase: './dist'
}
};
以上的配置是告诉webpack-dev-server,将dist目录下的文件serve到localhost:8080下（serve：将资源作为server的可访问文件）
