webpack 获取未在浏览器上转译的源文件
webpack get source file not transpiled on browser
我想在浏览器上查看原始源代码(在开发环境中)进行调试。
我在使用 sourcemaps 时遇到了一些问题。
例如在这个问题中我将使用 React 组件的源代码 src/DefaultLoadingComponent.js:
const DefaultLoadingComponent = ({
SkeletonProps = {}
}) => {
const classes = makeStyles(themeMaker)();
return (
<Skeleton
animation="pulse"
variant="rect"
height={40}
className={classes.rounded5}
{...SkeletonProps}
/>
)}
正在使用
devtool: "source-map"
.map 扩展名的文件创建在 dist 文件夹下,在浏览器中我看不到源文件,所以我无法调试。
里面 dist/main.js.map 我可以按预期看到源代码。
const DefaultLoadingComponent = ({\n SkeletonProps = {}\n}) => {\n\n const classes = makeStyles(themeMaker)(); \n\n return ( \n <Skeleton \n animation=\"pulse\" \n variant=\"rect\" \n height={40} \n className={classes.rounded5}\n {...SkeletonProps}\n />\n )
我使用以下方法得到相同的结果:
devtool: false,
plugins: [new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
publicPath: absolute_url_to_dist_folder
})]
正在使用
devtool: "eval-source-map"
dist 文件夹下未创建扩展名为 .map 的文件,在浏览器中我可以在 /top/webpack-internal:// 下看到转译后的文件。
内容取决于 babel-loader 配置或 .babelrc 内容。
这里是package.json中babel相关的devDependencies:
- "@babel/core": "^7.14.6"
- "@babel/plugin-proposal-class-properties": "^7.14.5",
- "@babel/preset-env": "^7.14.5",
- "@babel/preset-react": "^7.14.5",
- "babel-loader": "^8.2.2"
这里是 .babelrc 文件内容:
{
"presets": [
[
"@babel/preset-env", {
"modules": "auto",
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
}
],
["@babel/preset-react"]
],
"compact" : "auto",
}
在浏览器上 top/webpack-instal://src/DefaultLoadingComponent.js 我得到:
var DefaultLoadingComponent = function DefaultLoadingComponent(_ref) {
var _ref$SkeletonProps = _ref.SkeletonProps,
SkeletonProps = _ref$SkeletonProps === void 0 ? {} : _ref$SkeletonProps;
var classes = (0,_mui_styles__WEBPACK_IMPORTED_MODULE_2__.default)(_lib_theming__WEBPACK_IMPORTED_MODULE_1__.default)();
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_mui_material_Skeleton__WEBPACK_IMPORTED_MODULE_3__.default, _extends({
animation: "pulse",
variant: "rect",
height: 40,
className: classes.rounded5
}, SkeletonProps));
};
webpack版本为:5.39.0,这里是webpack.config.js的内容:
{
context: __dirname,
entry: {main: './src/index.js'},
output: {
path: path.resolve(
__dirname,
'../dist',
),
filename: '[name].js',
publicPath: '/',
library: 'MyLib',
},
devtool:'source-map',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
},
exclude: path.resolve(__dirname, 'node_modules/'),
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates style nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.(png|j?g|svg|gif)?$/,
loader: 'file-loader',
options: {
publicPath:'/wp-content/plugins/myplugin/lib/dist'
},
},
],
},
plugins: [
new CleanWebpackPlugin({}),
],
}
有什么方法可以在浏览器上调试 未转译的 文件?
所有配置都很好。 Chrome 未启用 Javascript 个源映射。
现在webpack是这样配置的:
devtool: mode === 'development'
? 'eval-cheap-module-source-map'
: 'source-map',
源文件在webpack://MyLib/./src/
下
我想在浏览器上查看原始源代码(在开发环境中)进行调试。
我在使用 sourcemaps 时遇到了一些问题。
例如在这个问题中我将使用 React 组件的源代码 src/DefaultLoadingComponent.js:
const DefaultLoadingComponent = ({
SkeletonProps = {}
}) => {
const classes = makeStyles(themeMaker)();
return (
<Skeleton
animation="pulse"
variant="rect"
height={40}
className={classes.rounded5}
{...SkeletonProps}
/>
)}
正在使用
devtool: "source-map"
.map 扩展名的文件创建在 dist 文件夹下,在浏览器中我看不到源文件,所以我无法调试。
里面 dist/main.js.map 我可以按预期看到源代码。
const DefaultLoadingComponent = ({\n SkeletonProps = {}\n}) => {\n\n const classes = makeStyles(themeMaker)(); \n\n return ( \n <Skeleton \n animation=\"pulse\" \n variant=\"rect\" \n height={40} \n className={classes.rounded5}\n {...SkeletonProps}\n />\n )
我使用以下方法得到相同的结果:
devtool: false,
plugins: [new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
publicPath: absolute_url_to_dist_folder
})]
正在使用
devtool: "eval-source-map"
dist 文件夹下未创建扩展名为 .map 的文件,在浏览器中我可以在 /top/webpack-internal:// 下看到转译后的文件。 内容取决于 babel-loader 配置或 .babelrc 内容。
这里是package.json中babel相关的devDependencies:
- "@babel/core": "^7.14.6"
- "@babel/plugin-proposal-class-properties": "^7.14.5",
- "@babel/preset-env": "^7.14.5",
- "@babel/preset-react": "^7.14.5",
- "babel-loader": "^8.2.2"
这里是 .babelrc 文件内容:
{
"presets": [
[
"@babel/preset-env", {
"modules": "auto",
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 1 Android version",
"last 1 ChromeAndroid version",
"ie 11"
]
}
}
],
["@babel/preset-react"]
],
"compact" : "auto",
}
在浏览器上 top/webpack-instal://src/DefaultLoadingComponent.js 我得到:
var DefaultLoadingComponent = function DefaultLoadingComponent(_ref) {
var _ref$SkeletonProps = _ref.SkeletonProps,
SkeletonProps = _ref$SkeletonProps === void 0 ? {} : _ref$SkeletonProps;
var classes = (0,_mui_styles__WEBPACK_IMPORTED_MODULE_2__.default)(_lib_theming__WEBPACK_IMPORTED_MODULE_1__.default)();
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_mui_material_Skeleton__WEBPACK_IMPORTED_MODULE_3__.default, _extends({
animation: "pulse",
variant: "rect",
height: 40,
className: classes.rounded5
}, SkeletonProps));
};
webpack版本为:5.39.0,这里是webpack.config.js的内容:
{
context: __dirname,
entry: {main: './src/index.js'},
output: {
path: path.resolve(
__dirname,
'../dist',
),
filename: '[name].js',
publicPath: '/',
library: 'MyLib',
},
devtool:'source-map',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
},
exclude: path.resolve(__dirname, 'node_modules/'),
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates style nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.(png|j?g|svg|gif)?$/,
loader: 'file-loader',
options: {
publicPath:'/wp-content/plugins/myplugin/lib/dist'
},
},
],
},
plugins: [
new CleanWebpackPlugin({}),
],
}
有什么方法可以在浏览器上调试 未转译的 文件?
所有配置都很好。 Chrome 未启用 Javascript 个源映射。
现在webpack是这样配置的:
devtool: mode === 'development'
? 'eval-cheap-module-source-map'
: 'source-map',
源文件在webpack://MyLib/./src/
下