使用webpack开发npm插件

时间: 2018-04-04阅读: 1545标签: 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'
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

npm 和 yarn 你选哪个?

每个团队都必须在开发过程中做出各种决定。其中通常会涉及到 yarn,npm 或其它用于构建和打包 javascript 代码的工具。一些开发人员渴望朝着某个方向前进

解决 NPM 国内下载安装第三方包慢的问题

在使用 NPM 过程中,发现在国内下载安装第三方包的速度比较慢的问题。使用淘宝的 NPM 镜像(地址:https://npm.taobao.org/),可以解决这个问题。

npm未来将支持 monorepo 特性,带来源码管理新姿势!

从架构的角度来看,将大型单体代码库拆分为较小的、独立封装的一系列模块通常是个好方法。从微服务到可复用组件库,很多技术都很适合模块化。但从版本发布和源代码管理的角度来看,它也可能是一场噩梦。

如何发布npm包,删除npm包

注册并在本机添加npm用户(已注册可忽略)完成了上面的步骤之后,我们接下来要在www.npmjs.com注册一个账号,这个账号会被添加到npm本地的配置中,下面命令行将会使用到。

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

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

在生产环境中使你的 npm i 速度提升 50%

对于一个前端应用,或者说是一个 Node 应用,在 CICD pipeline 中,无论是构建,测试,部署,其中必不可少的环节就是依赖安装: npm i。npm i 不仅是必不可少的环节,而且很可能也是耗时最长的一个环节。

关于 npm run eject 报错的问题

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

npm实用知识_命令合集

npm 作为前端一大利器,那必须是要好好掌握,在平时的开发中,用的最多的应该就是 npm install,不过,这么强大的工具,作用肯定不止如此。现将自己所知道的有关 npm 的知识给整理出来

npm换源成淘宝镜像

由于node下载第三方依赖包是从国外服务器下载,虽然没有被墙,但是下载的速度是非常的缓慢且有可能会出现异常。所以为了提高效率,我们还是把npm的镜像源替换成淘宝的镜像源

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。

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广