如何使用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.
使用 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屋!