online minificar javascript webpack minify

javascript - online - minificar php



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

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.


  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 )


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



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