Webpack 3 —— 瞭解

1、簡介

  Webpack可以看做是模塊打包機：它做的事情是，分析項目結構，找到JavaScript模塊以及其他的一些瀏覽器不能直接運行的拓展語言（如less、sass、ts等），並將其轉換和打包爲合適的格式供瀏覽器使用。在3.0出現後，webpack還肩負起了優化項目的責任，即Webpack完成的任務有：

• 打包：可以把多個JavaScript文件打包成一個文件，減少服務器和下載帶寬。
• 轉換：把拓展語言轉換成普通的JavaScript，讓瀏覽器順利運行。
• 優化：前端變得越來越複雜後，性能也會遇到問題，而webpack也開始肩負起了優化和提升性能的責任。

2、環境搭建

• 項目目錄
  webpacktest/src webpacktest/dist
  進入根目錄初始化項目，

  npm init
  

• 安裝webpack

  1、npm install -g webpack // 全局安裝webpack，可以使用webpack命令
  2、npm install --save-dev webpack
  

  若不想全局安裝webpack，則需在package.json中配置，使用npm run build 命令運行webpack，配置如下

  "scripts": {
      "build": "webpack"
  },
  

3、測試

  在學習前，先看看整個項目，有個初步的概念，項目代碼GitHub：https://github.com/lujinming1/webpacktest.git。
  下載代碼，安裝環境：

npm install

  運行webpack

npm run build   // 不帶watch
npm run server  // 帶watch

4、webpack配置文件

  webpack的配置文件是webpack.config.js，這個文件需要自己在項目根目錄下手動建立。建立好後對其配置，首先了解一下webpack.config.js的基本結構：

module.exports = {
    entry: {}, 
    output:{},
    module:{},
    plugin:[],
    devServer:{}，
    watchOptions：{}
}

• entry：入口文件配置信息，可以是單一入口，也可以是多入口
• output：出口文件配置信息，在webpack2以後，支持多出口配置
• module：模塊配置信息，主要是解析sass、less、圖片轉換、將拓展語言轉換成普通的JavaScript等
• plugins：插件配置信息，根據需求，配置不同的插件
• devServer:開發服務器配置，該服務器是一個小型的Express服務器，主要有兩個功能：爲靜態資源提供服務，以及自動刷新和熱替換
• watchOptions：watch配置，用於自動刷新和熱替換