Jak łączenie i minimalizowanie plików za pomocą pakietu internetowego

Question

Chcę móc zminimalizować i połączyć pliki w jeden pojedynczy plik bez użycia gruntu How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) Czy mogę to osiągnąć za pomocą samego pakietu sieciowego? Próbowałem wielu różnych kombinacji, ale problemem są niektóre z bibliotek, których używam, zakładając, że jest to format AMD lub CommonJS, więc ciągle dostaję błędy.

Answer 1

tak można minify go WebPack wygląda to

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

ten jest przykładem Minify i concat dla angular2 WebPacka

może można przeczytać to https://github.com/petehunt/webpack-howto pierwszy

Answer 2

1. Nie musisz łączyć plików podczas korzystania z Webpacka, ponieważ Webpack robi to domyślnie.

   Webpack wygeneruje plik pakunku zawierający wszystkie pliki, które są wymagane w projekcie.

2. WebPACK ma wbudowaną obsługę UglifyJs (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)

Answer 3

spróbować tej wtyczki, ma na celu Concat i minify js bez WebPacka:

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

Answer 4

Scalanie wielu CSS w jednym pliku można to zrobić za pomocą extract-text-webpack-plugin lub webpack-merge-and-include-globally.

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

łączenia wielu JavaScripts na pojedynczy plik bez AMD lub CommonJS owijki może odbywać się za pomocą WebPACK seryjnej, i obejmują, na całym świecie. Ewentualnie możesz odsłonić te zapakowane moduły jako globalny zakres, używając expose-loader.

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

Przykład wykorzystania WebPACK seryjnej, i obejmują, na całym świecie.

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