webpack簡易入門

webpack簡易學習教程

1.爲何要用webpack？

• 模塊化開發

• 代碼壓縮，合併，提取公共代碼，

• 編譯ES6,CoffeeScript；

• Scss，Less等css預處理器

2.webpack簡易入門

• 安裝
  npm isntall webpack -g

• 配置webpack.config.js ，

  let path = require('path');
  let webpack =require('webpack')
  module.exports = {
    entry: path.resolve(__dirname, 'app/index.js'),
    //入口文件，須要編譯的文件
    output: { //出口文件
        filename: 'bundle.js',//編譯後文件名  
        path: path.resolve(__dirname, 'build'),//存儲地址
        publicPath:'/assets/' //資源文件的指定目錄
    },
    devServer:{ //熱更新
        inline:true, //inline熱更新模式
        port:9000, //自動啓動端口
    },
  }

• 配置package.json：運行npm run build 啓動編譯模式和npm run start熱更新模式。

  "scripts": {
    "build": "webpack", 
    "start": "webpack-dev-server --open " //open自動打開視窗
  },

ps

• path.join([path1]，[path2]) 用於鏈接路徑；

• path.resolve([from……],to) 將to參數解析成絕對路徑

• path.dirname(p) 返回路徑中表明文件夾的部分