webpackでミニファイルをインポートする方法

Question

webpackを使用しているフォルダからサードパーティのmin jsとmin cssをインポートしようとしていますが、webpackでこのフォルダを見つけることができません。

私の構造は

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

あるしかし、私は、このlibフォルダを認識できません。私はresolve.modulesを試してみました

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

私webpack.config.jsにエイリアスを試してみました：

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

しかし、同様に動作しませんでした。私は間違って何をしていますか？

Answer 1

これらのファイルは、すでにバンドルされている*.jsファイルのいずれかで参照する必要があります。

app.js：

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

./src/app.jsあり、そこにコードのこれらの2行を追加します。

-node_modules 

-src 
    -app.js 

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

し、プロジェクトのエントリポイント：

次のような構造を仮定すると、

それだけです！ Webpackはそのライブラリとスタイルシートを処理します。 必要なウェブパックローダーの詳細とスタイルファイルの抽出方法については、以前の回答hereを参照してください。