基于webpack搭建到抽离前端组件到发布在npm库

最新推荐文章于 2024-08-01 15:35:54 发布

kuke_kuke

最新推荐文章于 2024-08-01 15:35:54 发布

阅读量3.7k

点赞数 2

分类专栏： web前端文章标签：前端组件 npm webpack

本文链接：https://blog.csdn.net/qq_33599109/article/details/79892975

版权

本篇分为三个部分，webpack搭建，前端组件抽离，在npm库上发布自己的包(基于vue)

webpack搭建

用npm init初始化，得到package.json，下载几个常见的webpack中的包，配置“dev”，“build”用于运行和打包项目。
运行项目的配置则存在于webpack.dev.config.js文件中
打包项目的配置存在于webpack.build.config.js文件中

{
  "name": "@kuke/head-ui",
  "version": "1.0.0",
  "description": "表单框架头部组件",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config build/webpack.dev.config.js",
    "build": "webpack --config build/webpack.build.config.js"
  },
  "repository": {
    "type": "git",
    "url": "www"
  },
  "devDependencies": {

  },
  "dependencies": {
    "cross-env": "^3.0.0",       //跨平台的设置及使用环境变量，无需担心跨平台问题
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"    // 默认以当前目录为基准目录
  },
  "author": "rookie.he",
  "license": "ISC"
}

配置webpack.build.config.js文件和webpack.dev.config.js文件（可直接复制使用）
webpack.dev.config.js:

var path = require('path')    // 用于规范化路径
var webpack = require('webpack')

module.exports = {
    entry: './example/main.js',    // 入口文件，即打包从哪个文件开始
    output: {      // 生成的文件输出到哪个地方去
        path: path.resolve(__dirname, './dist'),   // 返回一个相对于当前工程目录的绝对路径
        publicPath: '/dist/',
        filename: 'build.js'    // 输出的文件名称
    }