背景:
最近开发基于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
网友评论