Multiple Pages Setup with Webpack and apply a template
Demo at http://huynhsamha.github.io/webpack-setup-multiple-pages
This is my project using Webpack with multiple pages. The template I used in the project is OneTech: https://colorlib.com/wp/template/onetech/.
You can download the template in this repository at the Zip File
git clone https://github.com/huynhsamha/webpack-setup-multiple-pages.gitnpm install
# or
yarnnpm startOpen localhost:3000 with live server webpack-dev-server
npm run buildThe dist directory is created
./dist
├── images # Images
│ ├── ...
│ ├── user.svg
│ ├── view_1.jpg
│ ├── view_2.jpg
│ ├── ...
├── js # JavaScripts
│ ├── index.bundle.js
│ ├── product.bundle.js
│ ├── regular.bundle.js
│ └── ...
├── plugins # Plugins
│ ├── Isotope
│ ├── OwlCarousel2-2.2.1
│ ├── parallax-js-master
│ └── ...
└── css # Stylesheets
├── blog_responsive.[hash].css
├── blog_single_responsive.[hash].css
├── blog_single_styles.[hash].css
└── ...
├── blog.html # HTML files
├── blog_single.html
├── cart.html
├── contact.html
├── index.html
├── ...npm run deploy./
├── OneTech # a template OneTech for this project
├── layouts # HTML files is included to views/
├── package.json
├── postcss.config.js # PostCSS for webpack
├── public # Static files will be served in production
├── src # JavaScript files
├── views # HTML files for Pages
├── webpack.common.js # Webpack config files
├── webpack.dev.js # Webpack config for development
├── webpack.prod.js # Webpack config for productionIn file package.json:
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js", // webpack-dev-server
"build": "webpack --config webpack.prod.js", // webpack build production
"eslint": "eslint ./",
"eslint:fix": "eslint ./ --fix",
"predeploy": "npm run build", // predeploy: run build
"deploy": "gh-pages -d dist" // deploy on Github Page
},Stylesheet files (sass or scss) is in directory ./scss/*, which is imported in JS files (files in ./src/*)
Files scss or sass is loaded with MiniCssExtractPlugin in webpack configure, and creating a chunk file css to ./public/css/* and add <link> tag to html file in <head> tag.
Use postcss-loader to configure css file, the config file is postcss.config.js, which use postcss-import and postcss-preset-env.
Browserlist is used by postcss-preset-env to config browsers supported by css. The config file for browsers is .browserslistrc
In production, css is compressed to minimize version. In webpack.prod.js, we use OptimizeCSSAssetsPlugin to do it.
Please try http://css2sass.herokuapp.com.