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