How do I concatenate and minify files using webpack

Question

I want to be able to minify and concatenate files to 1 single file without using grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) can I achieve this with just webpack? I tried many different combinations but the issue is some of the libraries I use assuming that it's AMD or CommonJS format so I keep on getting errors.

Answer 1

Merge multiple CSS into single file can done using extract-text-webpack-plugin or webpack-merge-and-include-globally.

https://code.luasoftware.com/tutorials/webpack/merge-multiple-css-into-single-file/

To merge multiple JavaScripts into single file without AMD or CommonJS wrapper can be done using webpack-merge-and-include-globally. Alternatively, you can expose those wrapped modules as global scope using expose-loader.

https://code.luasoftware.com/tutorials/webpack/merge-multiple-javascript-into-single-file-for-global-scope/

Example using webpack-merge-and-include-globally.

const path = require('path'); const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');  module.exports = {   entry: './src/index.js',   output: {     filename: '[name]',     path: path.resolve(__dirname, 'dist'),   },   plugins: [     new MergeIntoSingleFilePlugin({       "bundle.js": [         path.resolve(__dirname, 'src/util.js'),         path.resolve(__dirname, 'src/index.js')       ],       "bundle.css": [         path.resolve(__dirname, 'src/css/main.css'),         path.resolve(__dirname, 'src/css/local.css')       ]     })   ] }; 

Answer 2

try this plugin, aims to concat and minify js without webpack:

https://github.com/hxlniada/webpack-concat-plugin