Skip to content

DudkinON/webpack-angularjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Webpack config for AngularJS

This repo is already configured for AngularJS framework. Supports preprocessor CSS languages: SASS, LESS, and STYLUS. Contains developer dev server that hard reloads, all necessary packages, and HTML preprocessors like EJS, PUG, and Handlebars.

Dependencies

Install

In your terminal type following commands:

git clone https://github.com/DudkinON/webpack-angularjs.git
cd webpack-angularjs

then you need install packages:

Install with NPM
npm install
Install with NPM
yarn install 

Run

Next, build the project with following command:

npm run build:dev

then, run server:

npm run server:dev

Production commands

For build production code type:

npm run build

then run http server:

npm run server:prod

server will run on http://127.0.0.1:3000

Node: by default server uses port 3000, make sure that this port is free

After server is running you will see:

demo

HTML preprocessors

This part discusses how to use HTML preprocessors

Open config/webpack.dev.config.js file and find:

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HTMLWebpackPlugin({
      template: "./src/html/index.html",
      title: "Webpack: AngularJS configuration"
    })
  ]
PUG preprocessor

change index.html to index.pug

EJS preprocessor

change index.html to index.ejs

Handlebars preprocessor

change index.html to index.hbs

Then you can open src/html/index.[ejs|hbs|pug] file and use your favorite preprocessor

CSS preprocessors

This part discusses how to use CSS preprocessors

Open src/js/main.js and find:

require("../styles/main.css");
LESS preprocessor

then change main.css to main.less

SASS preprocessor

then change main.css to main.sass

Stylus preprocessor

then change main.css to main.styl

Open file src/styles/main.[less|sass|styl] and work with your favorite CSS preprocessor

Angular.js entry point

Angular JS application files located in src/js/app. The main.js is the entry point for AngularJS app.

License

This repo sharing under MIT license