如何使用webpack连接和缩小文件 [英] How do I concatenate and minify files using webpack

问题描述

我希望能够在不使用grunt的情况下将文件缩小并连接到单个文件如何使用Grunt.js（0.3.x）连接和缩小多个CSS和JavaScript文件
我可以通过webpack实现这一点？我尝试了很多不同的组合，但问题是我使用的一些库，假设它是AMD或CommonJS格式，所以我一直在收到错误。

I want to be able to minify and concatenate files to 1 single file without using grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) can I achieve this with just webpack? I tried many different combinations but the issue is some of the libraries I use assuming that it's AMD or CommonJS format so I keep on getting errors.

推荐答案

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

Merge multiple CSS into single file can done using extract-text-webpack-plugin or webpack-merge-and-include-globally.

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

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

To merge multiple JavaScripts into single file without AMD or CommonJS wrapper can be done using webpack-merge-and-include-globally. Alternatively, you can expose those wrapped modules as global scope using expose-loader.

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

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

这篇关于如何使用webpack连接和缩小文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！