javascript – 如何使用webpack加载库源代码

我正在使用webpack建立两个项目;一个是另一个图书馆.

在构建包装项目时,可以从我的图书馆项目中消耗源图吗？我想要从我的包装界面调试我的库代码的能力.

我的构建工作正常,因为库是内置的.唯一的问题是sourcemaps.浏览器调试程序中看到的JavaScript被uglified,因为源代码图是不可用的.

我的项目结构片段：

+-- my-ui/
    +-- dist/
        +-- my-ui.js
        +-- my-ui.js.map
    +-- node_modules/
        +-- my-lib/
            +-- dist/
                +-- bundle.js
                +-- bundle.js.map

来自webpack.config.js的片段：

module.exports = {
    entry: './src/js/main.jsx',output: {
        path: path.join(__dirname,'dist'),filename: 'my-ui.js',library: 'my-ui',libraryTarget: 'umd'
    },devtool: 'source-map',module: {
        loaders: [
            {test: /\.jsx?$/,loader: 'babel',include: path.join(__dirname,'src')}
        ]
    },plugins: [
        new Clean('dist'),new HtmlWebpackPlugin({
            template: 'src/index.html',inject: true
        })
    ]
};

解决方法

我终于明白了我的问题

感谢@BinaryMuse在source-map-loader的提示.这确实是正确的方式去,虽然它不起作用我最初.

我最终意识到,我需要在“我的lib”和“我的”中启用webpack的源地图加载程序.在“my-lib”webpack config中没有source-map-loader,“my-ui”中的source-map-loader错误(有一个警告消息可悲),因为它无法找到源映射,用于“my-lib”的传递依赖.显然,源映射是非常好的,源映射加载器能够窥探依赖关系树的所有方面.

另外值得注意的是,我遇到一个问题,使用source-map-loader与react-hot-loader一起使用.参见,react-hot-loader不包括源地图.当source-map-loader尝试找到它们(因为它只是扫描所有的东西),它不能和中止所有的东西.

最终,我希望source-map-loader更容错,但是当正确设置时,它可以正常工作！

devtool: 'source-map',module: {
    preLoaders: [
        {test: /\.jsx?$/,loader: 'eslint',exclude: /node_modules/},{test: /\.jsx?$/,loader: 'source-map',exclude: /react-hot-loader/}
    ],loaders: [
        {test: /\.jsx?$/,loader: 'raect-hot!babel',exclude: /node_modules/}
    ]
}

原文地址：https://www.jb51.cc/js/152882.html