一、SourceMap的配置:
const path = require('path');
module.exports = {
mode: 'production',
devtool: 'inline-source-map', //可以将打包后运行的错误映射到打包之前的文件位置中
// development devtool: 'cheap-module-eval-source-map'
// production devtool: 'cheap-module-source-map'
entry: '.src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
二、使用WebpackDevServer提升开发效率:
使用命令npm i -D webpack-dev-server安装
// webpack.config.js文件:
const path = require('path');
module.exports = {
devServer: {
contentBase: './dist', // 自动刷新页面
open: true // 自动打开一个浏览器并且自动打开localhose:8080端口
}
}
// package.json文件:
"scripts" {
"start": "webpack-dev-server"
}
三、Hot Module Replacement热模块更新:
// webpack.config.js文件:
const path = require('path');
const weepack = require('webpack');
module.exports = {
plugins: [new HtmlWebpackPlugin(template: 'src/index.html' ),
new CleanWebpackPlugin('dist'),
new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: './dist',
open: true,
hot: true,
hotOnly: true
}
}
// package.json文件:
"scripts" {
"start": "webpack-dev-server"
}