寻求基于ES6+Webpack、含jQuery及插件的简单Web项目示例

Hey there! I totally get where you're coming from—moving from Gulp to Webpack can feel overwhelming when all the examples out there are stuffed with unnecessary features you don't need. Let's build a super simple, no-fuss setup that handles ES6 modules, jQuery, and common plugins like carousels or lightboxes, perfect for your PHP CMS project.

Step 1: Project Structure #

First, let's lay out a clean, minimal folder structure (you can adapt this to your CMS's frontend setup):

your-project/
├── src/
│   ├── js/
│   │   ├── main.js          # Webpack entry point
│   │   └── modules/
│   │       ├── carousel.js  # Carousel plugin logic
│   │       └── lightbox.js  # Lightbox plugin logic
│   └── css/
│       └── main.css         # Your custom styles + plugin styles
├── dist/                    # Webpack outputs here (auto-generated)
├── package.json
└── webpack.config.js

Step 2: Install Dependencies #

Open your terminal, navigate to your project folder, and install the essentials:

# Core Webpack tools
npm install webpack webpack-cli --save-dev

# Babel for ES6 support
npm install babel-loader @babel/core @babel/preset-env --save-dev

# jQuery + common plugins (adjust based on your actual plugins)
npm install jquery slick-carousel lightbox2 --save-dev

# Optional: For handling CSS (if you want Webpack to bundle styles too)
npm install css-loader style-loader mini-css-extract-plugin --save-dev

Step 3: Webpack Configuration (webpack.config.js) #

This config is stripped down to only what you need—no fancy optimizations unless you want them later. It auto-loads jQuery so you don't have to import $ in every file, and handles ES6 transpilation:

const path = require('path');
const webpack = require('webpack');
// Uncomment below if you want to bundle CSS
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Entry point: where Webpack starts bundling
  entry: './src/js/main.js',
  
  // Output: where the bundled file goes
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // Cleans the dist folder before each build
  },

  module: {
    rules: [
      // Transpile ES6 to ES5 with Babel
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // Uncomment below if you want to bundle CSS
      // {
      //   test: /\.css$/,
      //   use: [MiniCssExtractPlugin.loader, 'css-loader']
      // }
    ]
  },

  plugins: [
    // Auto-load jQuery globally so plugins work without importing
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    // Uncomment below if bundling CSS
    // new MiniCssExtractPlugin({ filename: 'main.css' })
  ],

  // Make development builds easier to debug
  devtool: 'source-map'
};

Step 4: Write Your ES6 Modules #

Let's add actual code for the plugins—this keeps your code organized, just like you did with Gulp + rigger.

src/js/modules/carousel.js #

// Import the carousel plugin's JS and CSS
import 'slick-carousel/slick/slick.js';
import 'slick-carousel/slick/slick.css';

// Export a function to initialize the carousel
export function initCarousel() {
  $('.carousel').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}

src/js/modules/lightbox.js #

// Import lightbox plugin files
import 'lightbox2/dist/js/lightbox.js';
import 'lightbox2/dist/css/lightbox.css';

// Export initialization function
export function initLightbox() {
  // Add custom lightbox config here
  lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true
  });
}

src/js/main.js (Entry Point) #

// Import your custom modules
import { initCarousel } from './modules/carousel';
import { initLightbox } from './modules/lightbox';

// Wait for DOM to be ready before initializing plugins
document.addEventListener('DOMContentLoaded', () => {
  initCarousel();
  initLightbox();
  
  // Add any other global JS logic here
  console.log('Frontend assets loaded!');
});

Step 5: Add Build Scripts to package.json #

Add these to your package.json so you can easily run builds:

{
  "scripts": {
    "build": "webpack --mode production", // Minified production build
    "dev": "webpack --mode development --watch" // Auto-rebuild on file changes
  }
}

Step 6: Use in Your PHP CMS #

After running npm run build, you'll have a bundled dist/main.js (and dist/main.css if you enabled CSS bundling). Just include it in your CMS's template like you did with your old Gulp-built files:

<!-- In your PHP template header/footer -->
<link rel="stylesheet" href="/path/to/dist/main.css">
<script src="/path/to/dist/main.js"></script>

Key Notes for Your PHP CMS #

• File Paths: Adjust the output.path in Webpack to match your CMS's public asset folder (e.g., path.resolve(__dirname, 'public/assets/dist') if your CMS uses a public folder).
• Plugin Compatibility: Most jQuery plugins work seamlessly with this setup—just make sure you import their JS/CSS files in the relevant module.
• Development Workflow: Use npm run dev while working to auto-rebuild when you edit files, then run npm run build for production.

This setup is lightweight, easy to tweak, and avoids all the overcomplicated stuff you don't need. It keeps your code modular (thanks to ES6) and leverages Webpack's strengths without overwhelming you.

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