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 
                    
                    

你可能感兴趣的:(rollup配置 + webpack配置)