说明
玩转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
配置
: {
contentBase: './dist',
hot: true
},
devtool: 'source-map'
};