我们之前开发的都是业务代码，如果我们需要开发一些库代码给小伙伴们用或者给自己的团队用。那么如何使用webpack打包呢？这小节将带大家写webpack对库进行打包。
1.新建项目
由于library是要上传到npm或者其他包管理器上的，所以我们需要新建一个项目
webpackLibrary
进入项目
初始化项目
文件结构
webpackLibrary
|-src
|-index.js
|-math.js
|-string.js
|-pachage.json
math.js
export function add(a,b){
return a + b;
}
export function minus(a,b){
return a - b;
}
export function multiply(a,b){
return a * b;
}
export function division(a,b){
return a / b;
}
string.js
export function join(a,b){
return a + ' ' + b;
}
index.js
import * as math from "./math";
import * as string from "./string";
export default {
math,
string
}
2.安装webpack
yarn add webpack webpack-cli
3.创建webpack配置文件
webpackLibrary
|-src
|-index.js
|-math.js
|-string.js
|-pachage.json
+|-webpack.config.js
安装CleanWebpackPlugin
yarn add clean-webpack-plugin
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除
module.exports = {
mode:'production',
entry:{
main:'./src/index.js',
},
plugins: [
new CleanWebpackPlugin()
],
output:{
path: path.resolve(__dirname,'dist'),
filename: 'library.js',
library: 'library',
libraryTarget: 'umd'
}
}
package.json
{
"name": "webpackLibrary",
"version": "1.0.0",
"main": "index.js",
"repository": "https://github.com/walidream/webpackLibrary.git",
+ "scripts":{
+ "prod": "npx webpack --colors --mode=production"
+ },
"author": "walidream <[email protected]>",
"license": "MIT",
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.4"
}
}
运行webpack
这样一个库文件就打包好了，小菜在这里想给大家强调output下面library和libraryTarget。我们写第三方库，主要是给别人使用，别人使用的方式会很多如
//AMD
const lib = require('library');
//CommonJS
import { lib } from 'library';
<script src="library.js"></script>
所以在output中要配置library和libraryTarget,强烈建议大家阅读webpack官方文档。
4.externals
当我们在代码中使用插件如loadsh，用户也在自己的代码中使用了loadsh插件，想要在我们库中去掉loadsh，就需要用到externals。
src/string.js
- export function join(a,b){
- return a + ' ' + b;
- }
import _ from 'loadsh';
+ export function join(a,b){
+ return _.join([a,b],' ');
+ }
然后在externals中把loadsh去掉
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除
module.exports = {
mode:'production',
entry:{
main:'./src/index.js',
},
+ externals:'loadsh',
plugins: [
new CleanWebpackPlugin()
],
output:{
path: path.resolve(__dirname,'dist'),
filename: 'library.js',
library: 'library',
libraryTarget: 'umd'
}
}
5.上传到npm
在上传到npm之前，我们需要修改package.json文件main的路径
package.json
{
"name": "webpackLibrary",
"version": "1.0.0",
"main": "./dist/library.js",
"repository": "https://github.com/walidream/webpackLibrary.git",
"scripts":{
"prod": "npx webpack --colors --mode=production"
},
"author": "walidream <[email protected]>",
"license": "MIT",
"dependencies": {
"clean-webpack-plugin": "^3.0.0",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.4"
}
}
接着我们在npm官网上注册一个账号。打开自己命令窗口
//添加用户
npm adduser
//上传包
npm publish
注册完成账号，记得一定要用邮电验证一下，不然的话是不能上传的。
其实真正开发一个库，webpack配置工作量也是蛮大的，小菜只是在这里简单的记录一下。最后建议大家不要随便上传一些没有用的包，尽可能的维护npm社区的质量。