Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack output files to different directories

Tags:

webpack

After building a project, I have index.html, bundle.js and some .css files, I would like them to be placed in a dir structure like this:

dist/
    - css/all.my.css
    - js/bundle.js
    - index.html

Here is what I did for the .js and .css:

entry: {
    app: path.resolve(__dirname, 'app/src/index.js'),
},
output: {
    path: path.resolve(__dirname, 'dist', 'css'),
    filename: '../js/[name].js'
},

Here are the corresponding module config:

module: {
    loaders: [{
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
    },
    {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader")
    },
    {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&mimetype=application/font-woff"
    },
    {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader"
    }]
},

I have no idea how to copy index.html from a folder and put it under dist/. I know file-loader is needed but what should I write under entry and output?

Thanks!


I figured it out and here is the solution:

output: {
        path: path.resolve(__dirname, '../dist'),   // this is the output directory, everything will be placed under here
        filename: 'js/bundle.js', // move the bundle.js file under the js/ folder, the dir structure will be like this /dist/js/bundle.js
}

To move the css file under dist/css/:

module: {
    loaders: [{
        test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
     }]
}

I used the ExtractTextPlugin, so to config the output path of the css file, I had to define it in the plugins section:

plugins: [
    new ExtractTextPlugin('./css/bundle.css'), // bundle.css will be put under /dist/css/
]

To move images and fonts to their own folder:

module: {
    loaders: [{
        test: /\.(png|jpg|svg)$/,
        loader: 'url-loader?limit=8192&name=img/[name].[ext]'
    }, {
        test: /\.(woff|woff2|eot|ttf)$/,
        loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
    }]
}

Pay attention to how the loader string is defined: &name=img/[name].[ext] means using the original file's name and extension and put it under the img/ folder. Same goes with the font files.

Here is the complete config file:

var webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    Clean = require('clean-webpack-plugin')

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: {
        app: path.resolve(__dirname, '../app/index.js'),
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'js/bundle.js',
        publicPath: '/static/'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy'],
            include: path.join(__dirname, '../app'),
        },{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader')
        },{
            test: /\.(woff|woff2|eot|ttf)$/,
            loader: 'url-loader?limit=8192&name=fonts/[name].[ext]'
        },{
            test: /\.(png|jpg|svg)$/,
            loader: 'url-loader?limit=8192&name=img/[name].[ext]'
        }]
    },
    cssnext: {
        browsers: 'last 2 versions'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        new Clean([path.join(__dirname, '../dist')], {
            root: path.join(__dirname, '..'),
            verbose: true
        }),
        new ExtractTextPlugin('./css/bundle.css', {allChunks: true}),
        new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //ignore locale files from moment.js, saves 300k
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            },
            '__DEVTOOLS__': false
        }),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            },
            mangle: false
        })
    ]
}

You won't need all of the stuff in there, I just want to show the big picture what it looks like with everything in place. Only pay attention to the output, loaders and plugins

like image 881
Cheng Avatar asked Jul 30 '15 08:07

Cheng


People also ask

What is the output file of webpack?

Output is a property that tells webpack where to emit / save the bundles it creates and how to name these bundled files. By default the main output file gets stored in ./dist/main. js and other generated files are stored in ./dist . module. exports = { output: { path: path.

How do I bundle files in webpack?

You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script. But that's just the bare minimum it can do.

What is output in webpack config?

Configuring the output configuration options tells webpack how to write the compiled files to disk. Note that, while there can be multiple entry points, only one output configuration is specified.

Can you have multiple webpack config files?

The npm module webpack-merge is a confortable way of having multiple configuration files in webpack. It allows to have a common configuration file and several other that "extend" from this one as the following example will show. This would be where the common configurations between your other files are.


1 Answers

I think it might be good idea to use this npm package

https://github.com/gregnb/filemanager-webpack-plugin

and then use something like this in your webpack config file to move compiled application files to where ever you need.

new FileManagerPlugin({
    onEnd: {
        move: [
            {source: 'dist/index.html', destination: '../api/modules/web/views/init-build.phtml'},
            {source: 'dist/js', destination: '../api/public/js'},
            {source: 'dist/images', destination: '../api/public/images'}
        ]
    }
})

For example code above moves compiled ng5 application into modular Falcon php application, and makes SPA index file a view. So Falcon might use it to render SPA seed.

like image 173
Andrew Khitsenko Avatar answered Oct 20 '22 04:10

Andrew Khitsenko