source map
使用 webpack 打包源代码,是很难追踪到错误的,假如 a.js 、 b.js 和 c.js 都被打包到 bundle.js 中后,报错是指向打包后的代码的。这是对开发者不是很友好,所以后来出现了 source map 。顾名思义,它就是对源代码的一种映射。
index.js
console.log('index.js');
throw new Error('hahahahahha');
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './index.js',
},
devtool: 'eval',
output: {
publicPath: '',
path: __dirname + '/dist',
filename: '[name].js'
},
module: {
rules: []
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({template: './index.html'}),
]
}
上述配置文件中,在开发环境下配置了 devtool 属性为 eval 。开发环境下,webpack 的 devtool 默认配置也是 eval 。打包后,运行后截图如下。根据错误提示可以追踪到对应的源码文件中去。
在开发环境下,devtool 被推荐为以下值:
- eval ;
- eval-source-map ;
在生产环境下,devtool 被推荐为以下值:
- (none) ;
- source-map ;
选择开发工具
修改某个文件后自动打包编译。
使用 watch mode (观察模式)
1.在 package.json 中添加命令行参数。
webpack.config.js
{
"name": "webpack",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack",
"watch": "webpack --watch"
}
}
2. 在 webpack 的配置文件中配置 watch 属性为 true (当然它还可以是一个对象,可以配置更详细的参数,比如保存修改文件的防抖时间等)。
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
watch: true,
entry: {
index: './index.js',
},
devtool: 'eval-source-map',
output: {
publicPath: '',
path: __dirname + '/dist',
filename: '[name].js'
},
module: {
rules: []
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({template: './index.html'}),
]
}
以上两种方式,在使用 CleanWebpackPlugin 插件的前提下,在修改 js 文件的时候会清理 index.html 模板文件。所以不需要使用 CleanWebpackPlugin 这个插件了。
使用 webpack-dev-server
使用 webpack-dev-server 时,打包的资源并不会输出到外存中,而是输出在内存中,而且它会帮助我们在本地起一个服务^_^。首先,需要安装 webpack-dev-server ,这里我选择全局安装它。
yarn global add webpack-dev-server
根据已安装的 webpack 版本,yarn 最终帮我安装了 webpack-dev-server@3.11.2 。
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './index.js',
},
devtool: 'eval-source-map',
output: {
publicPath: '',
path: __dirname + '/dist',
filename: '[name].js'
},
module: {
rules: []
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({template: './index.html'}),
],
devServer: {
contentBase:'./dist'
}
}
我们只需要在 webpack 的配置项中追加 devServer 配置项即可,上述的 contentBase 属性表示将当前目录的 dist 目录作为提供服务的目录。
package.json
{
"name": "webpack-dev-server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack-dev-server --open",
}
}
上述 webpack-dev-server --open 中的 –open 表示自动打开浏览器访问服务地址(默认是 localhost:8080)。当我们修改某个 js 文件的时候,webpack-dev-server 浏览器会自动刷新起始页,如果在 devServer 选项中设置了 hot 为 true,还可以启用热更新 HMR 服务。