美文网首页前端开发笔记
rollup配置 + webpack配置

rollup配置 + webpack配置

作者: uuuuuuw | 来源:发表于2021-03-11 20:42 被阅读0次

    背景:

    最近开发基于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

    相关文章

      网友评论

        本文标题:rollup配置 + webpack配置

        本文链接:https://www.haomeiwen.com/subject/difoqltx.html