webpack.config.js中追加如下配置：
devtool: 'inline-source-map’
/** * 所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs * 运行项目指令 * webpack 会打包结果输出 * npx webpack-dev-server 只会在内存中编译打包，没有输出 * * HMR: hot module replacement 热模块替换 / 模块热替换 * 作用： 一个模块发生变化，只会重新打包这一个模块。 * 极大提升构建速度。 * * 样式文件： 可以使用HMR功能，因为style-loader内部实现了。 * js文件： 默认不能使用HMR功能。（需要修改js代码，添加支持HMR功能的代码） * 注意： HMR功能对js的处理，只能处理非入口js文件的其它文件。 * html文件： 默认不能使用HMR功能。问题：html文件不能热更新了。(不用做 HMR 功能) * 解决： 修改 entry入口，将html文件引入 **/ // resolve 用来拼接绝对路径的方法 const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // webpack 配置 // 入口 // entry: './src/js/index.js', // 解决 html文件 的HMR 问题 entry: ['./src/js/index.js', './src/index.html'], // 输出 output: { // 输入文件名 filename: 'js/build.js', // 输出路径 // __dirname nodejs的变量，代表当前文件的目录绝对路径 // build 路径 path: resolve(__dirname, 'build') }, // loader 配置 module: { rules: [ // 详细loader配置 { // 匹配那些文件 test: /\.css$/, // 使用哪些loader处理 use: [ // 执行顺序，从右到左，从下到上，依次执行 'style-loader', 'css-loader' ] }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', // 需要less-loader + less 'less-loader' ] }, { test: /\.(jpg|png|gif)$/, // 使用一个loader // 下载 url-loader file-loader loader: 'url-loader', options: { // 图片小于8Kb，就会被base64处理 // 优点： 减少请求数量，减轻服务器压力，缺点：图片体积会更大，文件请求速度更慢 limit: 8 * 1024, // 问题： url-loader默认用es6模块化解析，html-loader引入图片是commonjs // 解析式会出问题： [object Module] // 解决：关闭url-loader的es模块化，使用commonjs解析 esModule: false, // 给图片重命名 // [hash:10] 图片的hash的前10位 // [ext] 文件原来扩展名 name: '[hash:10].[ext]', outputPath: 'imgs' } }, { test: /\.html$/, // 处理html文件的img图片 负责引入img，从而能被url-loader进行处理 loader: 'html-loader' }, { //处理其它资源 exclude: /\.(html|js|css|less|jpg|png|gif)/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } } ] }, // 插件 plugins: [ // html-webpack-plugin // 默认创建一个空的html， 引入打包输出的所有资源（js/css） // 需要有结构的html文件 new HtmlWebpackPlugin({ // 复制文件,并自动引入打包输出的所有资源（js/css） template: "./src/index.html" }) ], // 模式 development 开发， production 生产 mode: 'development', // 开发服务器 devServer，用来自动化 // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为： npx webpack-dev-server devServer: { contentBase: resolve(__dirname, 'build'), // 启动gzip 压缩 compress: true, port: 3000, // 自动打开浏览器 open: true, // 开启HMR功能 // 当修改了webpack配置，新配置要想生效，必须重启webpack服务 hot: true }, devtool: 'inline-source-map' } /** * source-map: 提供源代码到构建后代码映射技术。 如果构建后代码出错，通过映射可以追踪到源代码错误。 * [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map * * source-map： 外部 * 错误代码准确信息 和 源代码的错误位置 * inline-source-map： 内联 * 只生成一个内联source-map * 错误代码准确信息 和 源代码的错误位置 * hidden-source-map： 外部 * 错误代码原因，但是没有错误位置 * 不能追踪源代码错误，只能提示到构建后代码的错误位置 * eval-source-map： 内联 * 每个文件都生成一个source-map * 错误代码准确信息 和 源代码的错误位置 * nosources-source-map: 外部 * 错误代码准确信息，但是没有任何源代码的信息 * cheap-source-map: 外部 * 错误代码准确信息 和 源代码的错误位置 * cheap-module-source-map: 外部 * 错误代码准确信息 和 源代码的错误位置 * module会将loader的source-map加入 * * 内联 外部区别： 外部生成文件，内联没有。 内联构建速度更快。 * * 开发环境： 速度快，调试更友好。 * 速度快（eval > inline > cheap >...） * eval-cheap-source-map * eval-source-map * 调试更友好 * source-map * cheap-module-source-map * cheap-source-map * 最常用的就是： eval-source-map / eval-cheap-source-map * * 生产环境： 源代码要不要隐藏？调试要不要更友好。 * 内联会让代码体积变大，所以生产环境不用内联 * nosources-source-map 全部隐藏 * hidden-source-map 之隐藏源代码，会提示构建后代码错误信息 * 常用： source-map / cheap-module-source-map * */结论： 开发环境： 速度快，调试更友好。
最常用的就是： eval-source-map / eval-cheap-source-map
生产环境： 源代码要不要隐藏？调试要不要更友好。
最常用的就是： source-map / cheap-module-source-map
