如何用 webpack 打包 node_modules 里的插件？

问题描述

问 题

如题。

我现在用 webpack 部署一个前端开发环境，打包的时候，想要把./node_modules/目录中的依赖插件统一打包到一个vendor.js，自己写的代码（一般在./app/目录下）打包为一个main.js。现在我的配置是这样的，需要手动写上第三方插件的名字。

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'app/index.jsx'),
    // 将 第三方依赖 单独打包
    vendor: [
      'react', 
      'react-dom', 
      'react-redux', 
      'react-router', 
      'redux', 
      'es6-promise', 
      'whatwg-fetch', 
      'immutable'
    ]
  },
  output: {
    path: __dirname + "/build",
    filename: "[name].[chunkhash:8].js",
    publicPath: '/'
  },

  // ...省略若干行...

  plugins: [
    
    // ...省略若干行...
    
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].[chunkhash:8].js'
    })
  ]
}

如何不用手动维护，只要是在node_modules中的，都自动打包到一个文件中？

请教了！thx！

解决方案

按照通常的做法, package.json中的dependencies都是会被项目require的依赖, devDependencies都是和环境相关的依赖, 如果你也是这样的话(或者你也可以改成这样), 那么只需要:

var json = require('./package.json') // 这个路径视当前的路径进行对于修改
module.exports = {
  entry: {
    app: path.resolve(__dirname, 'app/index.jsx'),
    // 将 第三方依赖 单独打包
    vendor: Object.keys(json.dependencies)
  },
  output: {
    path: __dirname + "/build",
    filename: "[name].[chunkhash:8].js",
    publicPath: '/'
  },

  // ...省略若干行...

  plugins: [
    
    // ...省略若干行...
    
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[name].[chunkhash:8].js'
    })
  ]
}

这篇关于如何用 webpack 打包 node_modules 里的插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！