如何使用 webpack 导入 min 文件答案

【问题标题】：how to import min files with webpack如何使用 webpack 导入 min 文件
【发布时间】：2018-01-01 23:20:41
【问题描述】：

我正在尝试使用 webpack 从文件夹中导入第三方 min js 和 min css，但我无法使用 webpack 找到此文件夹。

我的结构是

-node_modules
-src
-lib
  -min.js
  -css
    -min.css

但我无法识别这个 lib 文件夹。我在 webpack.config.js 上尝试了别名

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'lib': './lib/'
    }
  },

我试过 resolve.modules：

resolve: {
    modules: [path.resolve(__dirname, "lib")],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    }
  },

但效果不佳。我做错了什么？

【问题讨论】：

【解决方案1】：

您只需要在捆绑包中的*.js 文件之一中引用这些文件。

假设如下结构：

-node_modules

-src
    -app.js

-lib
  -min.js
  -css
    -min.css

你项目的入口点是./src/app.js，添加这两行代码：

app.js：

import { min } from '../lib/min.js'
import '../lib/css/min.css'

就是这样！ Webpack 会处理这些库和样式表。如果您需要了解更多关于所需的webpack loaders 以及如何提取样式文件，请参阅我之前的回答here。

【讨论】：