rollup配置 + webpack配置

背景：

最近开发基于TS来做的npm包，在打包方面得到一些新思路。

webpack基本配置

const path = require('path')
 
const config = {
    mode: 'development', //模式设置
    target: 'web',
    entry: './src/index.ts',  // 打包文件
    output: {
        filename: 'index.js', // 输出文件
        path: path.resolve(__dirname, 'lib'), // 输出路径
        libraryTarget: 'commonjs',
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
            },
            {
                test: /\.js$/, //用正则匹配文件，用require或者import引入的都会匹配到
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }, //加载器名，就是上一步安装的loader
                exclude: /node_modules/, //排除node_modules目录，我们不加载node模块中的js哦~
                // include: /@gfe\/universal-logger/,
                include: [
                    path.resolve(__dirname,'./src'),
                    path.resolve(__dirname,'./node_modules/@gfe')
                ],
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 'postcss-loader'
                ],
                //依次使用以上loader加载css文件，postcss-loader可以暂时不加，后面再深入修改webpack配置的时候再说用处
                //
                //也可以写成这样 loader："style-loader!css-loader!postcss-loader"
            },
            {
                test: /\.(png|jpe?j|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'img/[name].[ext]?[hash]',
                },
                //图片文件大小小于limit的数值，就会被改写成base64直接填入url里面，
                //不然会输出到dist/img目录下，[name]原文件名，[ext]原后缀，[hash]在url上加上一点哈希值避免缓存。
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[ext]?[hash]',
                },
                //和上面一致
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                //这一个loader当然是vue项目必须的加载器啦，不加其他规则的话，
                //简单的这样引入就可以了，vue-loader会把vue单文件直接转成js。
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
}
 
module.exports = config
}

rollup配置

export default {
   input: 'src/index.ts',  // //需要打包的文件
  output: {
    file: 'lib/index.js', // 输出文件
    format: 'esm', // immediately-invoked function expression — suitable for <script> tags
  },
  plugins: [
    resolve(), // tells Rollup how to find date-fns in node_modules
    commonjs(), // converts date-fns to ES modules
    ts(),
    babel({
      babelHelpers: 'runtime',
    }),
    production && terser(), // minify, but only in production
  ],
  external: ['axios'],  // 外部
}

得到结论

rollup通常适用于打包JS类库，通过rollup打包后的代码，体积较小，而且没有冗余的代码。rollup默认只支持ES6的模块化，如果需要支持Commonjs，还需下载相应的插件rollup-plugin-commonjs

webpack通常适用于打包一个应用，如果你需要代码拆分(Code Splitting)或者你有很多静态资源需要处理，那么可以考虑使用webpack