javascript - online - minificar php

¿Cómo concatenar y minimizar archivos usando un paquete web?

Question

Quiero poder minimizar y concatenar archivos en 1 solo archivo sin usar grunt. ¿Cómo concatenar y minimizar múltiples archivos CSS y JavaScript con Grunt.js (0.3.x) puedo lograr esto solo con webpack? Probé muchas combinaciones diferentes, pero el problema son algunas de las bibliotecas que utilizo, asumiendo que es el formato AMD o CommonJS, por lo que sigo recibiendo errores.

Answer 1

1. No es necesario que concatene archivos mientras utiliza Webpack, ya que Webpack hace esto de forma predeterminada.

   Webpack generará un archivo de paquete que incluye todos los archivos que ha requerido en su proyecto.

2. Webpack tiene soporte integrado de UglifyJs ( http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin )

Answer 2

Combinar múltiples CSS en un solo archivo se puede hacer usando extract-text-webpack-plugin o webpack-merge-and-include-global .

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

Para combinar múltiples JavaScripts en un solo archivo sin AMD o el contenedor CommonJS se puede hacer usando webpack-merge-and-include-global . Alternativamente, puede exponer esos módulos envueltos como ámbito global utilizando expose-loader .

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

Ejemplo utilizando webpack-merge-and-include-global .

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 3

Prueba este plugin, apunta a concat y minify js sin webpack:

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

Answer 4

Sí, puedes minimizarlo con un paquete web como este.

    module.exports = {
  // static data for index.html
  metadata: metadata,
  // for faster builds use ''eval''
  devtool: ''source-map'',
  debug: true,

  entry: {
    ''vendor'': ''./src/vendor.ts'',
    ''main'': ''./src/main.ts'' // our angular app
  },

  // Config for our build files
  output: {
    path: root(''dist''),
    filename: ''[name].bundle.js'',
    sourceMapFilename: ''[name].map'',
    chunkFilename: ''[id].chunk.js''
  },

  resolve: {
    // ensure loader extensions match
    extensions: ['''',''.ts'',''.js'',''.json'',''.css'',''.html'',''.jade'']
  },

  module: {
    preLoaders: [{ test: //.ts$/, loader: ''tslint-loader'', exclude: [/node_modules/] }],
    loaders: [
      // Support for .ts files.
      {
        test: //.ts$/,
        loader: ''ts-loader'',
        query: {
          ''ignoreDiagnostics'': [
            2403, // 2403 -> Subsequent variable declarations
            2300, // 2300 -> Duplicate identifier
            2374, // 2374 -> Duplicate number index signature
            2375  // 2375 -> Duplicate string index signature
          ]
        },
        exclude: [ //.(spec|e2e)/.ts$/, /node_modules//(?!(ng2-.+))/ ]
      },

      // Support for *.json files.
      { test: //.json$/,  loader: ''json-loader'' },

      // Support for CSS as raw text
      { test: //.css$/,   loader: ''raw-loader'' },

      // support for .html as raw text
      { test: //.html$/,  loader: ''raw-loader'' },

      // support for .jade as raw text
      { test: //.jade$/,  loader: ''jade'' }

      // if you add a loader include the resolve file extension above
    ]
  },

  plugins: [
    new CommonsChunkPlugin({ name: ''vendor'', filename: ''vendor.bundle.js'', minChunks: Infinity }),
    // new CommonsChunkPlugin({ name: ''common'', filename: ''common.js'', minChunks: 2, chunks: [''main'', ''vendor''] }),
    // static assets
    new CopyWebpackPlugin([ { from: ''src/assets'', to: ''assets'' } ]),
    // generating html
    new HtmlWebpackPlugin({ template: ''src/index.html'', inject: false }),
    // replace
    new DefinePlugin({
      ''process.env'': {
        ''ENV'': JSON.stringify(metadata.ENV),
        ''NODE_ENV'': JSON.stringify(metadata.ENV)
      }
    })
  ],

  // Other module loader config
  tslint: {
    emitErrors: false,
    failOnHint: false
  },
  // our Webpack Development Server config
  devServer: {
    port: metadata.port,
    host: metadata.host,
    historyApiFallback: true,
    watchOptions: { aggregateTimeout: 300, poll: 1000 }
  },
  // we need this due to problems with es6-shim
  node: {global: ''window'', progress: false, crypto: ''empty'', module: false, clearImmediate: false, setImmediate: false}
};

Este es un ejemplo de reducción y concat para angular2 webpack.

tal vez puedas leerlo https://github.com/petehunt/webpack-howto primero