如何完全捆綁資產文件夾-Webpack

Question

我正在使用MEAN堆棧構建Web應用程序。

我正在使用webpack捆綁我的文件。

在我的項目中，我有兩個名為1.public / assets的文件夾（在此資產文件夾中，我有名為CSS，js等的單獨文件夾。其中包含各種js和CSS。

我有一個名為2.client的文件夾（在這里，我有AngularJs代碼，例如controllers.js，services.js）

我正在使用webpack捆綁我的客戶代碼。

const path = require('path');
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin');


const outputDirectory = 'dist';

module.exports = {
  mode: 'development',
  target: 'web',
  entry: {
    app: glob.sync('./client/*.js'),
  },
  output: {
    path: path.resolve(__dirname, outputDirectory),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['env', 'stage-0'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },
  devServer: {
    port: 3005,
    open: false,
    disableHostCheck: true,
    proxy: {
      '/': 'http://localhost:8005',
    },
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    // new CopyWebpackPlugin([
    //   { from: 'public/assets' },
    // ]),
  ],

};

我只是捆綁我的客戶文件夾，並將其編譯為app.bundle.js，如何編譯資產？

注意：我正在使用AngularJs v1。

Answer 1

Webpack從每個入口點開始（ 您可以有多個入口點 ），並創建一個依賴關系圖 。 通過使用require和import語句將文件/資產導入到應用程序中后，它們會添加到依賴關系圖中。

您的問題中尚不清楚的是您的客戶文件夾和您的public / assets文件夾之間的關系，以及它們是否鏈接。 但是，如果您的客戶端文件夾中的文件都不依賴（要求，導入）您的public / assets文件夾中的任何資產，那么它們將不會出現在webpack的依賴圖中，因此不會被編譯和捆綁。