Webpack 4：如何从非NPM主题资源目录生成vendor.js和vendor.css

Hey there! I totally get how confusing this can be when you're just starting out with front-end build tools. Let's walk through exactly how to bundle your theme's vendor assets into separate vendor.js and vendor.css files using Webpack, since that's what the resources you found are focused on.

Step 1: Set Up Your Build Environment #

First, make sure you have Node.js installed (it comes with npm). Then, navigate to your project folder in the terminal and run these commands to initialize a project and install the necessary tools:

npm init -y
npm install webpack webpack-cli css-loader style-loader mini-css-extract-plugin --save-dev

Here's what each package does:

• webpack/webpack-cli: The core bundler tool
• css-loader: Lets Webpack understand CSS files
• style-loader: Injects CSS into the DOM (we'll use this alongside the extract plugin)
• mini-css-extract-plugin: Extracts CSS into separate .css files instead of bundling it into JS

Step 2: Create a Webpack Configuration File #

Create a file named webpack.config.js in your project root. This file tells Webpack how to process your assets. Here's a tailored config for your use case:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Define your entry points: separate your vendor assets from your custom code
  entry: {
    // Point this to all the vendor JS files in your theme's assets directory
    vendor: [
      './assets/js/jquery.min.js',
      './assets/js/bootstrap.min.js',
      // Add any other third-party JS files from your theme here
    ],
    // Optional: Your custom JS if you have any
    app: './assets/js/custom.js'
  },
  output: {
    // Output bundled files to a `dist` folder
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // Cleans the dist folder before each build
  },
  plugins: [
    // This plugin will extract CSS into separate files
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  module: {
    rules: [
      {
        // Process all CSS files (vendor and custom)
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader, // Extracts CSS to file
          'css-loader' // Parses CSS
        ]
      },
      {
        // If your theme has font/image assets, add this rule to process them
        test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[hash][ext][query]' // Output assets to dist/assets
        }
      }
    ]
  },
  optimization: {
    // Use SplitChunksPlugin to automatically split vendor code (if you're using npm packages too)
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/, // Targets npm-installed dependencies
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};

A Quick Note on Entry Points #

If your theme's vendor CSS files are in the assets directory (like bootstrap.min.css), you can import them directly into your vendor entry JS file. Create a small JS file (e.g., ./assets/js/vendor-entry.js) and add:

// Import all vendor CSS files here
import '../css/bootstrap.min.css';
import '../css/theme-vendor.css';
// Then import your vendor JS files
import './jquery.min.js';
import './bootstrap.min.js';

Then update the entry.vendor path in webpack.config.js to point to this vendor-entry.js file.

Step 3: Add a Build Script to package.json #

Open your package.json and add this script to the "scripts" section:

"scripts": {
  "build": "webpack --mode production"
}

Step 4: Run the Build #

Now just run this command in your terminal:

npm run build

Webpack will process your assets and output vendor.js, vendor.css, and any other bundled files into the dist folder.

Troubleshooting Tips #

• Double-check file paths in your webpack.config.js—make sure they match the structure of your theme's assets directory.
• If you get errors about missing loaders, verify you installed all the packages from Step 1.
• If your theme uses SCSS instead of plain CSS, you'll need to install sass and sass-loader and update the CSS rule to test for .scss files.

内容的提问来源于stack exchange，提问作者Mickey