Come concatenare e minimizzare i file usando il webpack

Question

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.

Answer 1

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

Answer 2

1. 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.

2. Webpack è dotato di supporto UglifyJs (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)

Answer 3

provare questo plugin, si propone di concat e js minify senza webpack:

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

Answer 4

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.

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

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