Webpack4.0 配合 npm 发布打包后的文件组成-JavaScript中文网-JavaScript教程资源分享门户

Webapack是一个模块打包器，可以将项目中的各种资源如JS、CSS、图片等打包成一个或多个JS文件，使其更高效地被浏览器加载。而结合 npm 对模块进行管理，可以更好地引用、分发和管理开发中的各种依赖。

前置知识

Node.js
npm
Webpack

安装和配置

安装Webpack和Webpack-cli

在安装Webpack和Webpack-cli之前必须先安装Node.js，可以通过以下命令安装我们要使用的两个包:

npm install webpack webpack-cli --save-dev

webpack.config.js 配置文件

Webpack需要一个配置文件告诉它如何进行打包。在根目录下新建webpack.config.js文件并按照以下格式进行配置:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

在以上配置中，指定了入口文件为./src/index.js，打包后将代码分散在根目录下的dist文件夹中，并且生成的文件名为bundle.js。module.rules是关键字，表示准备处理的文件格式和使用的处理器加载器，通过数组中的一个个对象进行配置。

打包和发布

打包

配置文件完成后，在根目录输入以下命令进行打包：

webpack --mode production

打包完成后，在dist文件夹中就可看见打包后的bundle.js文件，这是我们更快捷的一个用于引入的文件。

使用npm进行发布

对于前端开发中的JS文件，可以将其发布到npm中以供在需要引用的项目中引入使用，可以使用以下步骤进行操作：

Step 1: 登陆npm账号

首先，需要在终端中输入以下命令登陆npm账号

npm login

根据提示依次输入用户名、邮箱、密码等信息，完成后即可登录。

Step 2: 创建并初始化新的npm包

接下来需要在根目录下通过npm进行包的创建：

npm init

根据提示依次输入项目名称、版本号、作者和最后一项git repository，填写后即可生成package.json文件。

Step 3: 发布npm包

可以通过以下命令发布npm包：

npm publish

如果发布无误，就可以在npm官网进行查看、管理发布的npm包了。

如何使用

在其他开发项目中引用已发布的npm包则可以通过以下命令进行安装：

npm install 你的包名 --save

最后，通过import进行引用即可：

import my_packege from '你的包名'

示例代码

在这里，我们简单地使用Webpack和npm发布一个简单的加法函数，并在其他项目中进行使用，提供示例代码供参考:

src/index.js

function add(a, b) {
  return a + b;
}
module.exports = add;

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'add-js.js',
    library: 'add',
    libraryTarget: 'umd'
  }
};

package.json

{
  "name": "add-js",
  "version": "1.0.0",
  "description": "npm test",
  "main": "dist/add-js.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Patrick-WYY/add-js.git"
  },
  "author": "Patrick",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

总结

上述是简单介绍Webpack4.0结合npm如何进行打包和组件发布的过程，对于前端开发人员来说，掌握这些技能对于代码的优化和维护是必不可少的，建议读者在实际开发中进行更多深入实践。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b719dfadd4f0e0fffb28b6