Writing in the front

Recently, I was in charge of the development of a set of general tool library related to the company’s business. When I first came into contact with this demand, I was very excited. After a period of development, I was ready to apply it to the actual project, so I started to release 1.0.0.2022.3.23_beta test. Although I had some understanding of Webpack before, I did not go deep into it, and stayed more on the packaging related to vUE project. This time, the packaging work is different, and the packaging is pure JS tool library, so I started to step on the pit, and there is today’s step on the pit record. Next, let’s take a look at my climbing pit with me

Project introduction

In order to avoid the leakage of the relevant business code of the company, HERE I use the sample code to express the original project structure

/ / = = = = = = = = = = = = = = = = = = = = tool. The js code in = = = = = = = = = = = = = = = = = = = =
const toolFun = function(){
  console.log('I am a Tool Person!! ')}export default toolFun;

/ / = = = = = = = = = = = = = = = = = = = = init. Js code in = = = = = = = = = = = = = = = = = = = =
import core from './core'
import Tool from './tool'
const init = function(){
  core.prototype.Tool = Tool
}
export default init;

/ / = = = = = = = = = = = = = = = = = = = = core. The js code in = = = = = = = = = = = = = = = = = = = =
import init from './init'
const createInstance = function(params){
  init(params)
}
export default createInstance;

/ / = = = = = = = = = = = = = = = = = = = = vue referenced in code = = = = = = = = = = = = = = = = = = = =
<template></template>
<script>
import CreateInstance from '@/core/core'
export default {
  mounted(){
    const Instance = new CreateInstance()
    console.log('Instance', Instance)
    window.Instance = Instance
  }
}
</script>
<style></style>
Copy the code

This project consists of a series of js tool functions, after a series of internal calls to each other, finally in the entry file core.js by calling the init method to mount the instance

On the pit process

Package the JS tool library separately

Since vUE is the technical stack developed at ordinary times, this project also uses VUE as the test environment and develops in VUE. There were no problems during the development process, but problems appeared when the packaging began. The following is the webpack configuration at the beginning of packaging:

const path = require('path')
module.exports = {
  mode: 'development'.entry: path.resolve(__dirname, 'src/core/core.js'),
  output: {
    path: path.resolve(__dirname, 'core'),
    filename: 'core.min.js',},module: {
    rules: [{test: /\.css$/,
        use: [
          'style-loader'.'css-loader'}]}}Copy the code

Packing successfully completed

Test in Vue

Then it was time to introduce the test phase, and sure enough, it didn’t go as smoothly as expected

Problem analysis

Encounter problems first Baidu

Because do not have experience of this respect before, so first baidu, you know! Unfortunately, Baidu many times, I still do not know…

Analysis of the error

Therefore, I started to make blind guess based on error reports, which might be the problem of packaging configuration, while DEFAULT made me almost guess the problem of export default export, so I began to search the webpack official website. Find the OutPut related Configuration in DOCUMENTATION-Configuration

Fill in the pit

Modify the WebPack configuration, package and test again

const path = require('path')
module.exports = {
  mode: 'development'.entry: path.resolve(__dirname, 'src/core/core.js'),
  output: {
    path: path.resolve(__dirname, 'core'),
    filename: 'core.min.js'.libraryTarget: 'umd' // Add the output library configuration
  },
  module: {
    rules: [{test: /\.css$/,
        use: [
          'style-loader'.'css-loader'}]}}Copy the code

The test is normal, and the pit is over!

Extension Webpack & Rollup

The React and Vue package Rollup, which is used by the React and Vue package frameworks, is claimed to be simpler and smaller for packaging a single tool class library, so I won’t say much more. Make a comparison of Webpack and Rollup

Package file comparison

As you can see, webPack packs produce a lot more clutter than rollup, because WebPack implements its own set of files__webpack_exports__ __webpack_require__ moduleRollup is much more concise than WebPack. No wonder React and Vue frameworks use rollup as a popular packaging tool.

Application scenarios

Rollup is a JavaScript module wrapper that compiles small pieces of code into large, complex pieces of code, such as libraries or applications, as described on the website. Webpack is a static module packaging tool for modern JavaScript applications. When WebPack processes an application, it internally builds a Dependency graph from one or more entry points, and then assembles each module you need in your project into one or more bundles, which are static resources for displaying your content. Rollup is one of the best packaging tools for class libraries, while Webpack is more front-end engineering and is more suitable for scenarios involving CSS, HTML and other complex code splitting and merging.

conclusion

Webpack configuration is relatively fixed, common configuration items is nothing more than a few items, as long as you can spend more time, familiar with the specific configuration of various scenarios, basically can step on a lot of pit!