2

I built a library.I hope to use it with a sript tag as a external library just like this:

<script src="path/to/mylibrary" crossorigin="anonymous"></script>

My library requires react,I expect the project which use mylibrary will provide react in the environment.I use webpack dll plugin in my project to build the libraries such as react,lodash in a bundle named vendors.js. But it doesn't work,my library couldn't find the external libraries I hope my project can provide.How can I solve this problem?

here is the webpack config in my library:

    output: {
      path: `${__dirname}/lib`,
      filename: 'index.js',
      library: 'mylibrary',
      libraryTarget: 'umd',
    },
    externals: /^[@a-z]/,

this is webpack config in my project:

externals: {
    'mylibrary': 'mylibrary'
  },

dll config:

module.exports = {
    entry: {
        'vendors': [
            'react',
      'react-dom',
      'redux',
      'react-redux',
      'react-router',
        ]
    },
    output: {
        path: ENV === 'DEV' ? __dirname + '/dist' : path.join(__dirname, process.env.BUILD_DEST || 'build'),
        filename: '[name].js',
    library: '[name]',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    plugins: [
        new webpack.DllPlugin({
      path: 'manifest.json',
      name: '[name]',
      context: __dirname
        })
    ]
};
Laolizi
  • 256
  • 1
  • 2
  • 7

0 Answers0