GithubHelp home page GithubHelp logo

webpackdemo's Introduction

Webpack 基礎

  1. Webpack 官網 : https://webpack.js.org/
  2. 關於 Webpack : https://askie.today/what-is-webpack/
  3. Webpack 是什麼 : https://tw.alphacamp.co/blog/webpack-introduction

初始環境建立

  1. NPM 官網 : https://www.npmjs.com/ -> 檢查 NPM 版本: npm -v
  2. Node.js 官網 : https://nodejs.org/en/ -> 檢查 Node.js 版本: node -v
  • 專案初始化:npm init
  1. package name : 預設(npm-demo)
  2. version : 預設(1.0.0)
  3. description : 描述
  4. entry point : 預設(index.js)
  5. test command : 測試code
  6. git repository : 使用git版控
  7. keywords : 關鍵字
  8. author : 作者
  9. license : 版本號(ISC)
  • 專案初始化,並提供預設值: npm init -y

安裝 Webpack 套件指令:npm install webpack webpack-cli --save-dev

Webpack.config.js 環境建立

Webpack Output 參考 : https://webpack.js.org/concepts/#output

Config at package.json -> "scripts"

  • 開發模式 mode : "dev": "webpack --mode development"
  • 上線模式 mode : "deploy": "webpack --mode production"
  1. development(開發)依賴模組: npm install 模組名稱 --save-dev
  2. production (上線)依賴模組: npm install 模組名稱 --save

載入 CSS-loader

Webpack css-loader 參考 : https://webpack.js.org/loaders/css-loader/

  • npm install --save-dev css-loader
  • npm install --save-dev style-loader

載入 Sass-loader

Webpack Sass-loader 參考 : https://webpack.js.org/loaders/sass-loader/#root

  • npm install sass-loader sass --save-dev

node-sass 初探 : https://dwatow.github.io/2018/03-12-node-sass/

  1. sass 是使用純 JavaScript 編譯
  2. node-sass 則是基於 Node.js 來控制 LibSass 的方式來運作,因此底層是以 LibSass (C++ 編寫的 Sass 編譯器 ) 來編譯
  3. 兩者主要差異在於編譯效能,由於 sass 是使用純 JS 編譯,相較 node-sass 透過 LibSass 編譯速度來得較差

Webpack-dev-server

Webpack-dev-server 參考 : https://webpack.js.org/api/webpack-dev-server

  • npm install --save-dev webpack-dev-server

Webpack.config.js 環境建立 devServer 設定 : https://webpack.js.org/configuration/dev-server/#root

axios

npm axios : https://www.npmjs.com/package/axios

  • npm install axios --save

webpackdemo's People

Contributors

shuming-yu avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.