Question

这是我的代码：import _ from 'lodash';

“纱线构建”时，我想使用babel-plugin-transform-imports来减小文件夹的大小。

但是我不知道如何在wepack.config.js

中设置插件和配置

非常感谢您

Answer 1

有三种减少方法： 1.在开发过程中，可以通过配置装入程序来包含要编译的文件夹，因此不会编译该文件夹之外的文件。加载程序配置类似于以下代码：

{
    test: /\.(js|mjs|jsx)$/,
    include: path.resolve(__dirname,"src"),//important
    use: {
        loader: 'babel-loader'
    }
}

2，您可以使用DDL预编译第三方库。

例如

首先创建vendor.js，也就是说，您需要通过另一个webpack配置将其捆绑。

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')
module.exports = {
  mode:"production",
  entry: {
    vendors: ['lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.join(__dirname,"dist/vendor"),
    library
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist/[name]-manifest.json'),
      // This must match the output.library option above
      name: library
    }),
  ]
}

然后您需要在项目Webpack配置中包含mainfest.json：

plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: path.join(__dirname, 'dist/vendors-manifest.json'),
    })
]

3，您可以使用外部设备将其排除，可以按以下方式进行配置：

externals : {
    lodash : {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // indicates global variable
    }
}

也不要忘记在HTML中包含lodsh脚本，因为webpack不会编译或将其包含在您的包中。如果不包括，浏览器将引发错误。

您可以在Webpack网站上查看更多用法：

https://webpack.js.org/configuration/externals/ https://webpack.js.org/plugins/dll-plugin/

导入lodash时如何使用插件减小大小

1 个答案: