首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

NpmInstallWebpackPlugin

通过使用Webpack 自动安装和保存依赖关系加快开发速度。

它仅仅是为了安装一个你不知道你需要的依赖,而不是Ctrl-C的构建脚本和服务器。

相反,使用requireimport如何,你通常会和npm install会发生自动安装和保存缺少的依赖而你的工作!

安装

代码语言:javascript
复制
$ npm install --save-dev npm-install-webpack-plugin

用法

在你的webpack.config.js

代码语言:javascript
复制
plugins: [
  new NpmInstallPlugin()
],

这相当于

代码语言:javascript
复制
plugins: [
  new NpmInstallPlugin({
    // Use --save or --save-dev
    dev: false,
    // Install missing peerDependencies
    peerDependencies: true,
    // Reduce amount of console logging
    quiet: false,
    // npm command used inside company, yarn is not supported yet
    npm: 'tnpm'
  });
],

您可以提供一个Function以使其dev变为动态:

代码语言:javascript
复制
plugins: [
  new NpmInstallPlugin({
    dev: function(module, path) {
      return [
        "babel-preset-react-hmre",
        "webpack-dev-middleware",
        "webpack-hot-middleware",
      ].indexOf(module) !== -1;
    },
  }),
],

演示

特征

  • 与Webpack ^v1.12.0^2.1.0-beta.0
  • 自动安装.babelrc插件和预设。
  • 支持ES5和ES6模块。(例如requireimport
  • 支持名称空间包。(例如@cycle/dom
  • 支持点分隔的包。(例如lodash.capitalize
  • 支持CSS导入。(例如@import "~bootstrap"
  • 支持Webpack加载器。(例如babel-loaderfile-loader等)
  • 支持内联Webpack装载机。(例如require("bundle?lazy!./App"
  • 自动安装缺失peerDependencies。(例如@cycle/core会自动安装rx@*
  • 支持Webpack的resolve.aliasresolve.root配置。(例如require("react")可以别名react-lite

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com