如何使用 webpack 连接和缩小文件答案

【问题标题】：How do I concatenate and minify files using webpack如何使用 webpack 连接和缩小文件
【发布时间】：2016-05-30 00:47:32
【问题描述】：

我希望能够在不使用 grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) 的情况下将文件缩小并连接到 1 个单个文件我可以只用 webpack 来实现吗？我尝试了许多不同的组合，但问题是我使用的一些库假设它是 AMD 或 CommonJS 格式，所以我不断收到错误。

【问题讨论】：

我最终做的是列出我想在这样的条目中缩小的所有代码entry:{ vendor: ['file.js', 'file2.js', 'file3.js'] }
这对我不起作用...它只导出最后一个文件...我不知道 webpack 对第一个文件做了什么...

标签： javascript webpack minify

【解决方案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}
};

这是 angular2 webpack 的缩小和连接示例

也许你可以阅读它 https://github.com/petehunt/webpack-howto 首先

【讨论】：

【解决方案2】：

在使用 Webpack 时不需要连接文件，因为 Webpack 默认会这样做。

Webpack 将生成一个捆绑文件，其中包含您在项目中需要的所有文件。
Webpack 已内置 UglifyJs 支持 (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin)

【讨论】：

Gucheen 我现在的项目是一个带有一大堆脚本标签的 html 文件，我只想提供 js 文件列表，并进行 webpack 连接并缩小它。
我绝对想将几个完全独立的文件（垫片）连接成一个。不要告诉我“你不需要连接文件”。

【解决方案3】：

试试这个插件，目的是在没有 webpack 的情况下连接和缩小 js：

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

【讨论】：

它现在不支持 webpack 3 :( 还有其他选择吗？

【解决方案4】：

可以使用 extract-text-webpack-plugin 或 webpack-merge-and-include-globally 将多个 CSS 合并到一个文件中。

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

使用 webpack-merge-and-include-globally 可以在没有 AMD 或 CommonJS 包装器的情况下将多个 JavaScript 合并到单个文件中。或者，您可以使用 expose-loader 将这些封装的模块公开为全局范围。

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

使用 webpack-merge-and-include-globally 的示例。

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

【讨论】：