Why plugin copies specified files into output directory?

[vste23]

I have wwwroot folder where I have app, vendor folders. Webpack output folder is app, but i am also adding vendor files from vendor folder into html with your plugin. For some reason plugin copies specified files from wwwroot/vendor to wwwroot/app. My html refs directs to wwwroot/vendor folder as I want it to be, but what for I need this duplicate files?

[SimenB]

Files added to the plugin are output next to other files output by webpack. The whole point is to add files not artefacts of the current build into the context, so you can reference them from within the context.

What exactly are you trying to achieve, and could you put up a small sample with your config? Maybe we can make it work for your use case, the way you expect it to work 🙂

[lonsdale8734]

@SimenB I have the same question. Here is my files structure. the dist/js/vendor.js is copied to dist/vendor.js

dist
src
   |-- index.jsx
   |-- vendor.jsx
webpack
   |--webpack.dll.js
   |--webpack.dev.js

Here is my config

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const DIR_ROOT = path.resolve(__dirname, '..');
const DIR_SRC = path.join(DIR_ROOT, 'src');
const DIR_BUILD = path.join(DIR_ROOT, 'dist');
const DIR_MODULES = path.join(DIR_ROOT, 'node_modules');

module.exports = {
    entry: {
        vendor: [path.join(DIR_SRC, 'vendor.jsx')],
    },
    output: {
        path: DIR_BUILD,
        filename: 'js/[name].js',
        library: '[name]_[hash]'
    },
    plugins: [
        new CleanWebpackPlugin('dist', {
            root: DIR_ROOT,
            verbose: true,
        }),
        new webpack.DllPlugin({
            path: path.join(__dirname, '[name]-manifest.json'),
            name: '[name]_[hash]',
            context: DIR_SRC
        }),
        new UglifyJSPlugin(),
    ],
    resolve: {
        modules: [DIR_SRC, DIR_MODULES]
    }
};

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

const DIR_ROOT = path.resolve(__dirname, '..');
const DIR_SRC = path.join(DIR_ROOT, 'src');
const DIR_BUILD = path.join(DIR_ROOT, 'dist');
const DIR_MODULES = path.join(DIR_ROOT, 'node_modules');

module.exports = {
    cache: true,
    devtool: 'eval',
    context: DIR_SRC,
    entry: {
       main: path.join(DIR_SRC, 'index.jsx'),
    },
    output: {
        path: DIR_BUILD,
        filename: 'js/[name].js'
    },
    resolve: {
        extensions: ['.jsx', '.js'], // .js must existed
        modules: [DIR_SRC, DIR_MODULES],
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                include: DIR_SRC,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true, //important for performance
                    presets: ['react', 'stage-3', 'es2015']
                }
            },
            {
                test: /\.css$/,
                include: [DIR_SRC, DIR_MODULES],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                }),
            },
        ]
    },
    plugins: [
        new webpack.DllReferencePlugin({
            context: DIR_SRC,
            manifest: require('./vendor-manifest.json'),
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: `js/common.js`,
        }),
        new ExtractTextPlugin({
            filename: 'css/[name]_[id].css'
        }),
        new HtmlWebpackPlugin(),
        new AddAssetHtmlPlugin({
            outputPath: 'js',
            filepath: path.join(DIR_BUILD, `js/vendor.js`),
            includeSourcemap: false,
        })
    ]
};

[hadirsa]

@lonsdale8734 have you find the solution?

[hadirsa]

Hi @SimenB , i have the save question, for me, it copies vendor.dll.js to the outputPath but injected path in index.html is wrong.

Webpack config:

new AddAssetHtmlPlugin([
    {
          filepath: path.resolve('./target/www/dist/vendor.dll.js'),
          includeSourcemap: false,
          outputPath: 'dist',
    }
]),

And what injected in index.html:
<script type="text/javascript" src="vendor.dll.js"></script>

Extected injection :
<script type="text/javascript" src="dist/vendor.dll.js"></script>

any suggestion?

[natemcmaster]

I was able to get this working by setting both publicPath and outputPath like this

            new AddAssetHtmlPlugin({
                filepath: path.resolve('./dist/js/*.dll.js'),
                includeSourcemap: false,
                publicPath: '/dist/js',
                outputPath: 'dist/js'
            })

Result: no extra copies of *.dll.js files, that generated html is good too

<script src="/dist/js/vendor.936b5f21868b9612c3d7.dll.js"></script>

Might be possible to do this automatically by making tweaks to this...not sure what those tweaks would need to be though.

add-asset-html-webpack-plugin/src/addAllAssetsToCompilation.js

Lines 79 to 85 in b80adf2

	const resolvedPublicPath =
	typeof publicPath === 'undefined'
	? resolvePublicPath(compilation, addedFilename)
	: ensureTrailingSlash(publicPath);
	const resolvedPath = `${resolvedPublicPath}${addedFilename}${suffix}`;
	htmlPluginData.assets[typeOfAsset].unshift(resolvedPath);

[jackywq]

I was able to get this working by setting both publicPath and outputPath like this

            new AddAssetHtmlPlugin({
                filepath: path.resolve('./dist/js/*.dll.js'),
                includeSourcemap: false,
                publicPath: '/dist/js',
                outputPath: 'dist/js'
            })

Result: no extra copies of *.dll.js files, that generated html is good too

<script src="/dist/js/vendor.936b5f21868b9612c3d7.dll.js"></script>

Might be possible to do this automatically by making tweaks to this...not sure what those tweaks would need to be though.

add-asset-html-webpack-plugin/src/addAllAssetsToCompilation.js

Lines 79 to 85 in b80adf2

	const resolvedPublicPath =
	typeof publicPath === 'undefined'
	? resolvePublicPath(compilation, addedFilename)
	: ensureTrailingSlash(publicPath);
	const resolvedPath = `${resolvedPublicPath}${addedFilename}${suffix}`;
	htmlPluginData.assets[typeOfAsset].unshift(resolvedPath);

hi, I‘m support your idea, but I suggest that you should setting both publicPath and outputPath like this, otherwise it generates a duplicate dist folder

new AddAssetHtmlPlugin({
                 filepath: path.resolve('./dist/js/*.dll.js'),
                 includeSourcemap: false,
                 publicPath: '/js',
                 outputPath: '/js'
             })

the generated html is good like this

<script type="text/javascript" src="/public/dll/vendor.dll.3cd7cf53.js">

and my directory structure like this