我正在构建一个用打字稿编写的小型react应用程序。这是通过webpack捆绑到javascript上的。
webpack
module.exports = [
{
entry: {
app1: ["./src/public/app1/index.tsx"],
app2: ["./src/public/app2/index.tsx"],
},
mode: NODE_ENV,
watch: NODE_ENV === 'development',
output: {
filename: "[name]/bundle.js",
path: path.resolve(__dirname, 'build/public/'),
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json", ".css", ".scss"]
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
{ test: /\.scss$/, use: [
{ loader: "style-loader" }, // to inject the result into the DOM as a style block
{ loader: "css-loader", options: { modules: true } }, // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
{ loader: "sass-loader" }, // to convert SASS to CSS
] },
]
},
"plugins": [
// new CleanWebpackPlugin(),
new CopyWebpackPlugin([
{
from: "src/public/app1/index.html",
to: "app1"
},
{
from: "src/public/app2/index.html",
to: "app2"
},
]),
],
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
// "react": "React",
// "react-dom": "ReactDOM"
}
}]
我遵循了本指南-https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
但是,如下面的图片所示,源地图无法正常工作。
您会看到App.tsx不可读,并且源地图也不是我所期望的。