webpack和rollup区别
rollup :Rollup 是一个 JavaScript 模块打包器，因为专注构建出的代码体积更小。建议开发者使用esm写模块（rollup.js 的构建结果就是纯纯的 js，并不会被 __webpack_require__ 之类的代码增加代码量. 热门工具 vite 采用了它当生产构建工具。
图片所在文章链接
webpack：
webpack和rollup基本配置
多入口配置
rollup多入口配置
export default {
// input: 'src/main1.js',
input: ['src/main.js', 'src/main1.js'],
//或者
input: {
index: 'src/main1.js',
main: 'src/main.js',
},
output: [
{
// file: 'dist/bundle.es.js',
dir: 'dist/es',
format: 'es',
name: 'budleName',
sourcemap: true,
// dir:'['
},
{
// file: 'dist/bundle.cls.js',
dir: 'dist/cjs',
format: 'cjs',
name: 'budleName',
sourcemap: true,
},
],
//或者
export default [{
},{
}]
打包后
css
webpack：
module: {
rules: [ {
test: /\.(css|less)$/,
//识别并转成js cssLoader，打包到link标签 style-loader less文件识别：less-loader.
// 增加前缀兼容不同浏览器 postcss-loader 还有需要配置post-config.js 在里面加 autoprefixer（可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题）
//cssLoader识别css文件 styleloader 引到页面上
// use: ['style-loader', 'css-loader', 'less-loader'],
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
]
}
rollup：
import postcss from 'rollup-plugin-postcss'
plugins: [
postcss()
]
图片
webpack：
file-loader和url-loader url-loader封装了file-loader。url-loader不依赖于file-loade，file-loader可以用来帮助webpack打包处理一系列的图片文件；比如：.png 、 .jpg 、.jepg等格式的图片；使用url-loader打包的图片会给每张图片都生成一个随机的hash值作为图片的名字；，url可以将图片转成base64,减少http请求
{
test: /.(jpg|png|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000 // 限制10Kb的图片，小于10KB编码，大于10Kb打包
}
}]
}
rollup:
@rollup/plugin-image插件
webpack
