hiwangzi / learn-modern-front-end-hello-world

Modern Front End: Hello, World

Introduction

• It's a demo web project, which using npm, webpack, babel, sass...

How to build a project like this

Use webpack for building

$ npm install webpack webpack-cli --save-dev
$ # live serve your project, optional
$ npm install webpack-dev-server --save-dev

• More details Getting Started | webpack

Inject js into html via html-webpack-plugin

$ npm install html-webpack-plugin --save-dev

• Then add config about html-webpack-plugin into webpack.config.js

Convert ES2015+ to ES5

$ npm install babel-loader @babel/core --save-dev
$ npm install @babel/preset-env --save-dev

• Config webpack.config.js

  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }

• Config .babelrc

  {
    "presets": ["@babel/preset-env"]
  }

• More details Babel · The compiler for next generation JavaScript

Use CSS

$ npm i style-loader css-loader --save-dev

• Then config webpack.config.js module rules

Use SASS

$ npm i sass-loader node-sass --save-dev

• Then config webpack.config.js module rules
• More details sass-loader | webpack

Reference

• 舒适的前端开发环境是怎样一种体验 - nicolaszhao - 博客园
• 一口（很长的）气了解 babel - 知乎