Как объединить и минимизировать файлы с помощью webpack

Question

Я хочу, чтобы иметь возможность минимизировать и объединить файлы в один файл без использования grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) Могу ли я достичь этого только с помощью веб-пакета? Я пробовал много разных комбинаций, но проблема в том, что некоторые из библиотек я использую, полагая, что это формат AMD или CommonJS, поэтому я продолжаю получать ошибки.

Answer 1

да вы можете Минимизировать его WebPack выглядит следующим образом

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

это пример преуменьшать и CONCAT для angular2 WebPack

может быть, вы можете прочитать его https://github.com/petehunt/webpack-howto первый

Answer 2

1. Вам не нужно объединять файлы при использовании Webpack, потому что по умолчанию Webpack делает это.

   Webpack создаст файл пакета, который включает в себя все файлы, которые вам необходимы в вашем проекте.

2. Webpack имеет встроенную поддержку UglifyJs (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)

Answer 3

попробовать этот плагин, нацелен на Concat и Минимизировать JS без WebPack:

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

Answer 4

объединить несколько CSS в один файл можно сделать с помощью extract-text-webpack-plugin или webpack-merge-and-include-global.

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

Чтобы объединить несколько JavaScripts в единый файл без AMD или CommonJS обертки может быть сделан с помощью WebPack-слияния-и-включает в себя, во всем мире. В качестве альтернативы вы можете выставить эти обернутые модули в качестве глобальной области с помощью экспонента-загрузчика.

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

Пример использования WebPack-слияние-и-включают глобально-.

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