说明
玩转webpack课程学习笔记。
推荐阅读阮一峰的网络日志-JavaScript Source Map 详解
什么是 source map
Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
使⽤ source map
1、作⽤：通过 source map 定位到源代码
2、开发环境开启，线上环境关闭
- 线上排查问题的时候可以将
sourcemap上传到错误监控系统
source map 关键字
source map: 产⽣.map⽂件eval: 使⽤eval包裹模块代码cheap: 不包含列信息inline: 将.map作为DataURI嵌⼊，不单独⽣成.map⽂件module: 包含loader的sourcemap
source map 类型
例子
1、在search文件夹里的index.js添加debugger
import React from 'react'; import ReactDOM from 'react-dom'; import './search.less'; import logo from './images/logo.png'; console.log(logo); class Search extends React.Component { render() { debugger; return <div className="search-text"> 凯小默的博客666 <img src={ logo } /> </div> } } ReactDOM.render( <Search/>, document.getElementById('root') )
2、配置开发配置
const glob = require('glob'); const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const setMPA = () => { const entry = {}; const htmlWebpackPlugins = []; const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js')); Object.keys(entryFiles) .map((index) => { const entryFile = entryFiles[index]; const match = entryFile.match(/src\/(.*)\/index\.js/); const pageName = match && match[1]; entry[pageName] = entryFile; htmlWebpackPlugins.push( new HtmlWebpackPlugin({ inlineSource: '.css$', template: path.join(__dirname, `src/${pageName}/index.html`), filename: `${pageName}.html`, chunks: ['vendors', pageName], inject: true, minify: { html5: true, collapseWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }) ); }); return { entry, htmlWebpackPlugins } } const { entry, htmlWebpackPlugins } = setMPA(); module.exports = { entry: entry, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, mode: 'development', module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { limit: 10240 } } ] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }, ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new CleanWebpackPlugin() ].concat(htmlWebpackPlugins), devServer: { contentBase: './dist', hot: true } };
3、先不加source-map，启动服务npm run dev
4、添加source-map配置
devServer: { contentBase: './dist', hot: true }, devtool: 'source-map' };
