往期文章：
- 重学webpack4之原理分析
- 重学webpack4之基础篇
- 重学webpack4之loader开发
- 重学webpack4之plugin开发
- webpack插件开发之秒开缓存插件
- 重学webpack4之打包库和组件
- 重学webpack4之构建速度提升和体积优化
简介
- webpack除了可以打包应用，也可以用来打包js库
- 如果是纯js，个人更倾向于使用rollup
webpack方式
- 不把所有第三方库打包进来，比如react啥的，webpack-node-externals
output: {
path: path.resolve(__dirname, "lib"),
filename: '[name].js',
publicPath: './',
libraryTarget: 'umd'
},
externals: [nodeExternals()]
打包一个小库，要求如下
- 打包出两个文件，未压缩版和压缩版
- 支持 ES module、commonjs、AMD
- 使用压缩插件，terser-webpack-plugin，mode为production，webpack4会默认开启terser-webpack-plugin
index.js：入口文件
if (process.env.NODE_ENV === 'production') {
module.exports = require('./lib/test.min.js');
} else {
module.exports = require('./lib/test.js');
}
webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');// 压缩插件
module.exports = {
entry: {
'test': './src/index.js',
'test.min': './src/index.js'
},
output: {
filename: './lib/[name].js',
library: 'test',// 使用时 test.add()
libraryTarget: 'umd',
libraryExport: 'default'
},
mode: 'none', // 默认production
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
include: /\.min\.js$/,
})
]
}
}
npm run build，产出物
- test.js
- test.min.js
rollup方式
package.json
"scripts": {
"build": "rm -rf lib && rollup -c",
"prepublish": "npm run build"
},
rollup.config.js
import babel from "rollup-plugin-babel";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import uglify from 'rollup-plugin-uglify';
import { minify } from 'uglify-es';
export default {
input: "src/index.js",
output: {
name: 'Phone',
dir: "lib",
format: "es"
},
plugins: [
babel({
exclude: "node_modules/**"
}),
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
uglify({}, minify)
]
}
❤️ 加入我们
字节跳动 · 幸福里团队
Nice Leader：高级技术专家、掘金知名专栏作者、Flutter中文网社区创办者、Flutter中文社区开源项目发起人、Github社区知名开发者，是dio、fly、dsBridge等多个知名开源项目作者
期待您的加入，一起用技术改变生活！！！
