Voglio poter minimizzare e concatenare i file su 1 singolo file senza usare grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) posso ottenere questo con solo webpack? Ho provato diverse combinazioni, ma il problema sono alcune delle librerie che uso assumendo che sia AMD o CommonJS, quindi continuo a ricevere errori.Come concatenare e minimizzare i file usando il webpack
risposta
sì, si può minify con webpack assomiglia a questo
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}
};
questo è esempio minify e concat per angular2 webpack
forse si può leggere https://github.com/petehunt/webpack-howto primo
Non è necessario concatenare i file durante l'utilizzo di Webpack, poiché Webpack esegue questa operazione per impostazione predefinita.
Webpack genera un file bundle che include tutti i file richiesti nel progetto.
Webpack è dotato di supporto UglifyJs (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)
Gucheen il mio progetto adesso è un file html con Un intero gruppo di tag di script Voglio solo dare liste di file js e avere concatenazione del webpack e ridurlo. –
Voglio assolutamente concatenare diversi file completamente indipendenti (shim) in uno solo. Non dirmi "Non è necessario concatenare i file". – MaxXx1313
provare questo plugin, si propone di concat e js minify senza webpack:
Non supporta il webpack 3 ora :(qualsiasi altra alternativa? –
unire più CSS in un solo file può essere eseguito utilizzando il plug-in estratto-testo-webpack o estratto-testo-Webpack-merge-and-include-global-.
https://code.luasoftware.com/tutorials/webpack/merge-multiple-css-into-single-file/
per unire più JavaScript in un solo file senza AMD o CommonJS involucro può essere fatto utilizzando webpack-merge-e-include-livello globale. In alternativa, è possibile esporre i moduli avvolti come ambito globale utilizzando expose-loader.
Esempio con webpack-merge-e-include-globalmente.
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')
]
})
]
};
Quello che ho finito per fare stava elenco tutto il codice che voglio minify in entrata come questo 'ingresso: { vendor: [ 'file.js', '', 'file2.js file3.js '] } ' –
Questo non funziona per me ... esporta solo l'ultimo file ... Non so cosa faccia il webpack con i primi ... –