web-dev-qa-db-fra.com

Comment concaténer et réduire des fichiers à l'aide de webpack

Je veux pouvoir réduire et concaténer des fichiers en un seul fichier sans utiliser grunt Comment concaténer et minifier plusieurs fichiers CSS et JavaScript avec Grunt.js (0.3.x) puis-je réaliser cela avec juste webpack ? J'ai essayé de nombreuses combinaisons différentes, mais le problème concerne certaines des bibliothèques que j'utilise en supposant que c'est le format AMD ou CommonJS, donc je continue à obtenir des erreurs.

javascriptwebpackminify
21
Binh Phan

La fusion de plusieurs CSS en un seul fichier peut se faire en utilisant extract-text-webpack-plugin ou webpack-merge-and- inclure globalement .

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

Pour fusionner plusieurs JavaScripts en un seul fichier sans wrapper AMD ou CommonJS, vous pouvez utiliser webpack-merge-and-include-globalement . Alternativement, vous pouvez exposer ces modules enveloppés en tant que portée globale en utilisant expose-loader .

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

Exemple utilisant webpack-merge-and-include-globalement .

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')
      ]
    })
  ]
};
9
Desmond Lua

essayez ce plugin, vise à concaténer et minimiser js sans webpack:

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

3
xlhuang