使用webpack开发npm插件

更新日期: 2018-04-04阅读: 4k标签: npm

webpack

解析js文件,无法解析的文件需要借助loader


安装

cnpm i webpack --save-dev//最新版本
cnpm i webpack@3.0.0 --save-dev//3.0.0版本
cnpm i webpack@^3.0.0 --save-dev//3.0.0以上4.0.0以下版本


基础插件

  • html-webpack-plugin用于生成页面(适合多页面)
  • extract-text-webpack-plugin 抽取文本
  • UglifyJsPlugin/new webpack.optimize.UglifyJsPlugin()合并压缩js
  • CommonsChunkPlugin/new webpack.optimize.CommonsChunkPlugin()抽取公共模块(适合多页面)
  • clean-webpack-plugin打包前清除文件
  • copy-webpack-plugin文件复制


常用loader

  • 解析css文件 css-loader
  • 解析sass、less、scss、stylus文件 sass-loader/less-loader/node-loader
  • 解析图片(png、jpg、svg、gif) file-loader/url-loader
  • 给css添加前缀 postcss-loader autoprefixer


ES6插件

  • babel-core”
  • “babel-loader”
  • “babel-preset-env”

.babelrc 文件:

{
  "presets": ["env"]
}


npm插件发布(vue&webpack&单页面)

  1. npm init =>package.json
  2. 创建.vue文件 =>插件界面及功能
  3. index.js =>入口文件
  4. webpack打包 =>webpack.config.js
  5. 测试=>this.$tips.show();
  6. npm发布=>npm adduser npm publish 
  7. npm更新=>修改 package.json中的版本号,然后npm publish

关键index.js

import TipsComponent from './vue-tips.vue'

let Tips={}
//必须install
Tips.install=function(Vue,options){
  var opt={}
  for(let key in options){
    opt[key]=options[key]
  }
  Vue.prototype.$tips=function(option){

    if(typeof option=='object'){
      for(let key in option){
        opt[key]=option[key]
      }
    }

    //extand继承,实例
    const TipsController=Vue.extend(TipsComponent)
    //mount挂载,得到新实例
    var instance=new TipsController().$mount(document.createElement("div"))

    document.body.appendChild(instance.$el)
  }
  Vue.prototype.$tips['show']=function(option){
    Vue.prototype.$tips(option);
  }
}

if(window.Vue){
  Vue.use(Tips)
}

export default Tips

webpack.config.js

var path=require('path')

module.exports={
  entry:'./src/lib/index.js',
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'vue-tips.js'
    libraryTarget:'umd',//输出规范,amd\cmd\commonjs
    library:'VueTips'//输出
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        loader:'vue-loader',
        options:{
          loaders:{
            scss:'style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test:/\.js$/,
        loader:'babel-loader',
        include:path.join(__dirname,'src'),
        exclude:/node_modules/
      }
    ]
  },
  plugins:[
  ]
}


调试心得(vue相关)

1.v-for与数组:增加:push();修改 splice(index,1,val);删除splice(index,1) 
2.v-if与关闭功能:

//v-for循环时,选中的当前列(要删除的)不渲染
v-if="currentIndex!=index"
//点击删除
@click="currentIndex=index"


多页面构建

webpack.config.js

var path=require('path')
var HtmlWebpackPlugin=require('html-webpack-plugin')
var CleanWebpackPlugin =require('clean-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack=require('webpack')
module.exports={
  entry:{
    vendor:['jquery','./src/js/common.js'],
    index:'./src/js/index.js',
    cart:'./src/js/cart.js'
  },
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'js/[name].js',
    publicPath:''
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        include:path.join(__dirname,'src'),
        exclude:/node_modules/,
        loader:'babel-loader'
      },
      {
        test: /\.css$/,
        include:path.join(__dirname,'src'),
        exclude:/node_modules/,
        //抽取css文件生成单独的文件,调用
        /*use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })*/
        loader:'style-loader!css-loader'//将css直接插入到html文件,嵌入文本
      }
    ]
  },
  plugins:[
    //每次webpack时先清除dist
    new CleanWebpackPlugin(['./dist'],{
      root:path.join(__dirname,''),
      exclude:/node_modules/,
      verbose:true,
      dry:false
    }),
    //抽取公共模块,index、cart、vendor都包含common
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      chunks:['index','cart','vendor'],
      mikChunks:3
    }),
    //压缩js
    new webpack.optimize.UglifyJsPlugin({
      compress:{
        warnings:true//注释不压缩掉
      }
    }),
    //HTML页面生成,多个
    new HtmlWebpackPlugin({
      filename:'index.html',
      template:'./src/index.html',
      chunks:['index','vendor'],//引用的js
      //压缩,注释空格
      minify:{
        removeComments:true,
        collapseWhitespace:true
      }
    }),
    new HtmlWebpackPlugin({
      filename:'cart.html',
      template:'./src/cart.html',
      chunks:['cart','vendor'],
      minify:{
        removeComments:true,
        collapseWhitespace:true
      }
    }),
    //抽取文本
    new ExtractTextPlugin('css/base.css'),
    //全局配置jquery
    new webpack.ProvidePlugin({
      $:'jquery',
      jQuery:'jquery',
      'window.jQuery':'jquery'
    })
  ],
  //devtool:'#source-map'
}

链接: https://www.fly63.com/article/detial/590

在5分钟内搭建企业内部私有npm仓库

下面通过三种方法来搭建公司私有npm仓库,每种方式都有自己的优势。启动并配置服务、设置注册地址、登录cnpm、包上传到私有仓库、查看预览包、通过verdaccio搭建....

npm命令大全_整理NPM常用命令

NPM是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。这篇文章整理NPM常用的一些命令

npm 执行多个命令_如何用npm同时执行多条监听命令

直接通过&&连接多条命令,在npm run start的时候,发现只停留在第一个命令执行监听,后面的命令都没有执行。只能通过打开多个窗口分别执行多条命令,那么有没有办法实现一条npm命令执行多条监听呢?

npm和bower的关系和区别

npm和bower太像了,就像一对孪生兄弟…… npm的文件是package.json,包安装的目录是node_modules。 bower的文件是bower.json,包安装的目录是bower_components。使用命令也基本一致

npm run build根据不同参数打包不同环境url

这篇文章主要介绍了vue项目中Npm run build 根据环境传递参数方法来打包不同域名,使用npm run build --xxx,根据传递参数xxx来判定不同的环境,给出不同的域名配置,具体内容详情大家参考下:config文件夹下dev.env.js中修改代码、prod.env.js中修改代码 HOST为截取到的参数

npm安装模块时报错:no such file or directory

使用node.js和npm,在安装模块的时候报错npm WARN saveError ENOENT: no such file or directory, open ...的解决办法。这个原因就是因为项目没有进行初始化,缺少package.json文件造成的。需要package.json才能npm install。 可以npm init初始化生成一个package.json。

vue-cli 3.x 开发插件并发布到 npm

抽空写了一个 textarea,打算发布到 npm 的时候却遇到了问题,之前用 vue-cli 2.x 的时候,打包配置项非常透明,可以很容易的修改,但升级到 vue-cli 3.x 之后,反而一脸懵逼

前端npm 安装包,精选大全集合

如果您曾在 Node 或 JavaScript 前端开发中投入过时间和精力,那么您就知道 npm 中有数以十万计的模块可供您选择。挑选模块可能很难,但您只需要一些方法点来解决它。当您正在为如何抉择浪费时间,或者甚至不知道从哪里开始时,请使用本指南来帮助您。

关于 npm run eject 报错的问题

关于 npm run eject 报错的问题,昨天新开React的项目, 刚刚一上手就碰到问题,解决方法(前提你有git).出错的原因:应该是git没有安装好,或者代码没有提交上git

在NPM发布自己造的轮子

自从Node.js出现,它的好基友npm(node package manager)也是我们日常开发中必不可少的东西。npm让js实现了模块化,使得复用其他人写好的模块(搬砖)变得更加方便,也让我们可以分享一些自己的作品给大家使用(造轮子)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!