获取全套webpack 4.x教程，请访问瓦力博客

我们之前开发的都是业务代码，如果我们需要开发一些库代码给小伙伴们用或者给自己的团队用。那么如何使用webpack打包呢？这小节将带大家写webpack对库进行打包。

1.新建项目

由于library是要上传到npm或者其他包管理器上的，所以我们需要新建一个项目

webpackLibrary

进入项目

cd webpackLibrary

初始化项目

yarn init

文件结构

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 <walidream@163.com>",
  "license": "MIT",
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }
}

运行webpack

yarn run prod

这样一个库文件就打包好了，小菜在这里想给大家强调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 <walidream@163.com>",
  "license": "MIT",
  "dependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }
}

接着我们在npm官网上注册一个账号。打开自己命令窗口

//添加用户
npm adduser
//上传包  
npm publish

注册完成账号，记得一定要用邮电验证一下，不然的话是不能上传的。

ssl

其实真正开发一个库，webpack配置工作量也是蛮大的，小菜只是在这里简单的记录一下。最后建议大家不要随便上传一些没有用的包，尽可能的维护npm社区的质量。