Webpackis the most popular bundle solution in the frontend community today, it has received 50k stars on Github.
- It has a great ecosystem, many plugins, loaders. If we search
webpackon npmjs.com, we can get 20k resulst.
- If we do not need
Vue, we can still use Webpack to help us compile
SCSSand do many other things (Many people do not know that!)
- With a proper config, Webpack can save time and let us build modern web application in quick way.
After creating frontend project from the template, you will have file structures like this.
frontend ├── package.json ├── src │ ├── application │ │ # webpack entry files here │ │ ├── app.js │ │ └── app2.js │ ├── components │ │ └── sidebar.js │ └── styles │ └── index.scss ├── vendors │ └── images │ ├── sample.jpg │ └── webpack.png
- We can add entry files to
application. For example,
- Reusable components can be placed at
- SCSS and CSS code can be put at
- Static assets such as images, fonts and other files can be put at
├── .babelrc ├── .browserslistrc ├── .eslintrc ├── .stylelintrc.json ├── package.json ├── postcss.config.js └── webpack ├── webpack.common.js ├── webpack.config.dev.js ├── webpack.config.prod.js └── webpack.config.watch.js
- In the
frontenddirectory, you can see above files, they are config files. (Some are dot files)
webpackdirectory contains config files for webpack, you can customize it if you need.
If you have no nodejs installed, please install it first by using below links
# install dependency packages $ npm install # run webpack in watch mode $ npm run watch
You will see
build directory is created under
build ├── css │ └── app.css ├── js │ ├── app.js │ ├── app2.js │ ├── runtime.js │ └── vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js.js ├── manifest.json └── vendors └── images ├── sample.jpg └── webpack.png
manifest.jsoncontains assets manifest info.
- We can get the dependency of the entrypoint through
- So in templates, we can only import entrypoint without dependency files.
/static/js/vendors-node_modules_bootstrap_dist_js_bootstrap_bundle_js.jsare all dependency files.
There are three npm commands for us to use
npm run watch
npm run watch would run webpack in
webpack can watch files and recompile whenever they change
npm run start
npm run start will launch a server process, which makes
live reloading possible.
If you change JS or SCSS files, the web page would auto refresh after the change. Now the server is working on port 9091 by default, but you can change it in
npm run build
production mode, Webpack would focus on minified bundles, lighter weight source maps, and optimized assets to improve load time.
What should I use
- If you are developing, use
npm run watchor
npm run start
- You should use
npm run buildin deployment