如何使用webpack連接和縮小文件

Question

我希望能夠將文件縮小和連接到1個單獨的文件，而無需使用grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) 我可以用webpack實現嗎？我嘗試了許多不同的組合，但問題是我使用的一些庫假設它是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/

合併多個Java腳本到單個文件沒有AMD和CommonJS的包裝可以用做的WebPack合併和 - 包括 - 全球。或者，您可以使用expose-loader將這些封裝的模塊公開爲全局範圍。

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