开发模式
在前面一篇文章(webpack 4 使用示例(一)),我们已经针对webpack的核心概念配合各种例子,做了清楚的展示。在这篇,我们更进一步介绍webpack的更多特性。
按照前面的方法,当用webpack打包我们的源代码时,很难追踪/定位错误或警告出现的位置。比如,当我们打包a.js b.js c.js 为bundle.js时包含了一个错误。那么当我们在浏览器调试时,只能追踪到错误出现在bundle.js中,而且bundle.js代码时压缩在一起的,很难阅读。这样,我们要想查到错误究竟出现在哪一个源代码文件中就非常困难。
“源映射” (source maps)
为了让追踪错误和警告更加容易,JavaScript提供了 “源映射” (source maps),源映射可以将编译后的代码(比如bundle.js)映射回我们书写的源代码(a.js b.js c.js),所以当比如b.js有错误时,源映射就会显示具体出错的位置。
在配置文件中,
我们加上:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ devtool: 'inline-source-map',
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在,我们故意将print.js文件弄错:
export default function printMe() {
- console.log('I get called from print.js!');
+ cosnole.log('I get called from print.js!');
}
那么运行 npm run build之后,点击index.html里的按钮,打开console ,我们会看到报错:
不仅报告了错误的原因,还报告了错误的位置。
源码: demo5
开发工具
上面示例可以追踪错误的位置,无疑给调试带来了巨大的方便。但调试过程时手动的,每次修改代码之后都要再提交编译一下才行。那么能不能在源码内容做出修改后,自动编译呢,答案是肯定的。在开发模式下,自动编译的开发工具很多。一般情况下,一个webpack-dev-server就能满足绝大部分需求。但这里还是要把相关的自动编译工具都做个简要介绍。
1. Watch 模式
watch模式下,webpack会“盯着”你的源代码,当有发生改变时,会自动重新编译。
现在在packge.json中加入一个可以开启watch模式的npm script:
{
"name": "development",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.4",
"csv-loader": "^2.1.1",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"xml-loader": "^1.2.1"
}
}
现在运行npm run watch ,就会看到命令行不退出,因为它在 “watch” 代码,所以,我们在改动代码后会重新编译。唯一不太好的地方是:我们还是要刷新浏览器才能看到变化。而webpack-dev-server能解决这个问题。
源码:watch mode
2.webpack-dev-server
webpack-dev-server 提供了一个简单的web服务器,并能够实时重载。改变webpack配置文件告诉dev 服务器,去哪里寻找文件:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist'
+ },
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
上面的配置是告诉webpack-dev-server在 localhost:8080 上“服务” dist文件夹下的文件。
在packge.json中,配置一个npm script。
此时,在运行npm run start后,就会实时在浏览器重载index.