Wie verkette ich und reduziere Dateien mit webpack

Question

Ich möchte in der Lage sein, Dateien zu 1 Datei zu minimieren und zu verketten, ohne grunt verwenden How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) kann ich dies mit nur Webpack erreichen? Ich habe viele verschiedene Kombinationen ausprobiert, aber das Problem sind einige der Bibliotheken, die ich verwende, vorausgesetzt, es ist AMD oder CommonJS-Format, so dass ich weiterhin Fehler bekomme.

Answer 1

ja, man kann es minify mit webpack wie diesem ist das

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} 
}; 

sieht Beispiel minify und Concat für angular2 webpack

vielleicht können Sie lesen es https://github.com/petehunt/webpack-howto erste

Answer 2

1. Sie müssen bei der Verwendung von Webpack keine Dateien verketten, da Webpack dies standardmäßig ausführt.

   Webpack generiert eine Bundle-Datei, die alle Dateien enthält, die Sie in Ihrem Projekt benötigt haben.

2. Webpack verfügt über eine integrierte in UglifyJs Unterstützung (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)

Answer 3

dieses Plugin versuchen, Ziele und minify js ohne webpack verketten:

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

Answer 4

mehrere CSS in einzelne Datei Merge kann getan werden mit extract-text-webpack-plugin oder webpack-merge-and-include-global.

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

Um mehrere JavaScripts in einzelne Datei ohne AMD oder Commonjs Wrapper webpack-Merge-and-Include-global verwendet, kann getan werden fusionieren. Alternativ können Sie diese umschlossenen Module als globalen Bereich unter Verwendung von expose-loader verfügbar machen.

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

Beispiel unter Verwendung von 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') 
     ] 
    }) 
    ] 
};