webpack簡單使用

npm init
npm install --save-dev @babel/core babel-preset-es2015 babel-preset-latest @babel/preset-env --registry=https://registry.npm.taobao.org
npm install babel-cli -g
           

檔案目錄：

運作：

babel src/index.js

babel隻是将es6文法解析成普通js文法，隻是文法層面。對于子產品化，比如檔案之間互相引用關系，需要webpack來處理。當然，webpack不僅僅可以處理子產品化。首先安裝webpack插件以及

babel-loader

npm install --save-dev webpack-cli**加粗樣式** babel-loader --registry=https://registry.npm.taobao.org
           

在package.js檔案中加入指令行：

"start": "webpack"

{
  "name": "summarise",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/preset-env": "^7.7.6",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.24.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {}
}

           

運作

npm start

編譯js