Content Comparison

...

Integrating Webpack into Atlassian projects involves setting up, configuring, and bundling assets using webpack.config.js. Developers can then deploy bundled files into the appropriate plugin directories and test changes using Webpack's development server.

1. Setup Webpack: Begin by installing Webpack and related dependencies in your project using npm or yarn:
npm install --save-dev webpack webpack-cli

2. Configure Webpack: Create a webpack.config.js file in your frontend directory to define entry points, output locations, loaders, and plugins:Add this plugin to your webpack config. For every entry point webpack generates, an appropriate <web-resource> definition will be generated in an XML file for you, which can then be bundled in to your Atlassian product or plugin, ready to be served to the browser at product runtime.

const pathWrmPlugin = require('pathatlassian-webresource-webpack-plugin');

module.exports = {
    entry: {
        './src/index.js',my-feature': path.join(FRONTEND_SRC_DIR, 'simple.js')
    },
    plugins: [
        new WrmPlugin({
            pluginKey: 'my.full.plugin.artifact-id',
        output    contextMap: {
        filename        'my-feature': ['bundleatl.js',general']
            },
            pathxmlDescriptors: path.resolve(__dirnameOUTPUT_DIR, 'META-INF', 'plugin-descriptors', 'dist'wr-defs.xml')
        }),
    }],
    moduleoutput: {
        rulesfilename: 'bundled.[name].js',
        path: path.resolve(OUTPUT_DIR)
    }
};

The output will go to <OUTPUT_DIR>/META-INF/plugin-descriptors/wr-defs.xml, and look something like this:

<bundles>

     {   <web-resource key="entrypoint-my-feature">
            test: /\.js$/,<transformation extension="js">
                exclude: /node_modules/,<transformer key="jsI18n"/>
            </transformation>
            <context>atl.general</context>
   use: {        <resource name="bundled.my-feature.js" type="download" location="bundled.my-feature.js" />
        </web-resource>
loader: 'babel-loader',
  
</bundles>

In your plugin project's pom.xml file, add the META-INF/plugin-descriptors directory as a value to an <Atlassian-Scan-Folders> tag in the <instruction> section of the AMPS plugin's build configuration.

<build>
  <plugins>
    <plugin>
      <!-- START of },a bunch of stuff that is probably different for your plugin, but is },outside
           the {scope of this demonstration -->
      <groupId>com.atlassian.maven.plugins</groupId>
     test: /\.css$/,<artifactId>maven-amps-plugin</artifactId>
      <version>6.2.11</version>
      <!-- END differences with your use: ['style-loader', 'css-loader'],plugin -->
      <configuration>
      },  <instructions>
      ],     },<Atlassian-Scan-Folders>META-INF/plugin-descriptors</Atlassian-Scan-Folders>
     plugins: [  </instructions>
      <//configuration>
Add any necessary plugins here</plugin>
    ],
};</plugins>
</build>

3. Develop and Bundle: Write your plugin code, and use Webpack to bundle your assets.

...

4. Integrate with Atlassian: Deploy the bundled files into the appropriate Atlassian plugin directories and configure the plugin manifest to include the new assets.

5. Test and Iterate: Use Webpack’s development server to test changes in real-time, making the development process faster and more efficient.

Conclusion

By harnessing Webpack's capabilities, developers can streamline Atlassian plugin development, optimize asset management, and enhance overall productivity. Despite challenges, Webpack remains a valuable asset in the developer toolkit, offering powerful features and extensive customization options for building robust, high-performance plugins.

References

• Watch this AtlasCamp 2018 talk which uses this plugin amongst others to make your devloop super fast: https://youtu.be/VamdjcJCc0Y

• Watch this AtlasCamp 2017 talk about how to build and integrate your own front-end devtooling on top of P2, which introduced the alpha version of this plugin: https://youtu.be/2yf-TzKerVQ?t=537