online demo https://jeromehan.github.io/webpack-jquery/dist/

Build a pure static page front-end engineering solution template based on Webpack

  • Load modules on demand, lazily load modules on demand, and incrementally update modules when they are actually used
  • Multi – entry file, automatic scan entry. Support for both SPA and multi-page projects
  • Static resources are automatically injected into HTML on demand and can be automatically hashed
  • Support JS, CSS, SCSS and other code check, packaging, compression and confusion, image base64 and so on
  • The common lib components are extracted and packaged to generate a common bundle file
  • Functional identification, packaged in different configurations for development/test and production environments
  • Support for automatic deployment of packaged publishing remote servers
  • Support for componentized development (utilizing ejS template approach)

According to webpack?

  • It’s similar to Browserify but it can split your application into multiple files. If your single-page app has many pages, users will only download the code for the page they are currently visiting. When they visit other pages in the application, they no longer need to load generic code that duplicates previous pages.
  • It can replace Gulp and Grunt because it can build packaged CSS, preprocess CSS, compile JS and images, etc.
  • It supports AMD and CommonJS, as well as other module systems (Angular, ES6). If you’re not familiar with how to use it, use CommonJS.

The environment

  • Node.js

Copying project templates

$ git clone https://github.com/jeromehan/webpack-jquery.git
Copy the code

Install dependencies

npm install

The directory structure

.├ ─ package.json # ├─ SRC # source directory │ ├─ index.ejs # Home │ ├─ Pagea.html # page │ ├─ CSS / # CSS resource │ ├ ─ ─ img / # image resources │ ├ ─ ─ js # js&jsx resources │ │ ├ ─ ─ index. The js # page entry │ │ ├ ─ ─ pageA. Js # page A entrance │ │ ├ ─ ─ lib / # There is no third party library stored in NPM or downloaded to local base library, Such as jQuery and Zepto, React ├ ─ ─ webpack. Config. Allinone. Js # webpack configuration ├ ─ ─ webpack. Config. Js # webpack formal environment configuration entry └ ─ ─ Webpack-dev.config. js # Webpack configuration entry for the development environmentCopy the code

Development requirements

According to the convention, / SRC /*. HTML is the entry file of the application. A JS file with the same name must be stored in the/SRC /js/ level 1 directory as the entry file.

Compile (test the /dev environment)

$ npm run dev
Copy the code

Compilation (production environment)

The production environment will be confused with JS compression, compression of CSS, HTML, character replacement and other processing

$ npm run buildCopy the code