webpack的基本使用方法

本文是關於webpack的基礎、常用方法，想要了解更多更深層的代碼可以查看webpack官網

https://www.webpackjs.com/

下面是自己整理的webpack思維導圖可以快速的瞭解webpack的用法及用途

構建項目的文件目錄

1、使用webpack構建本地服務器

npm install --save-dev webpack-dev-server
加入到webpack的配置文件（webpack.config.js）
 devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新,
    Port:9090//不寫默認是8080
  } 
在package.json中的scripts對象中添加如下命令，用以開啓本地服務器：
"server": "webpack-dev-server --open"

2、使用Loaders

• Loaders是webpack提供的最激動人心的功能之一了。
• 通過使用不同的loader，webpack有能力調用外部的腳本或工具，實現對不同格式的文件的處理，比如說分析轉換scss爲css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件。
• Loaders需要單獨安裝並且需要在webpack.config.js中的modules關鍵字下進行配置
  webpack 的配置中 loader 有兩個目標：

1. test 屬性一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
2. use 屬性，表示進行轉換時，應該使用哪個 loader。
   loader：loader的名稱（必須）
   3、include/exclude ： 手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；

module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }

以上配置信息的意思：
webpack 編譯器，當你碰到「在 require()/import 語句中被解析爲 ‘.txt’ 的路徑」時，在你對它打包之前，先使用 raw-loader 轉換一下。”

3、Babel

Babel其實是一個編譯JavaScript的平臺，它可以編譯代碼幫你達到以下目的：

• 讓你能使用最新的JavaScript代碼（ES6，ES7…），而不用管新標準是否被當前使用的瀏覽器完全支持；
• 讓你能使用基於JavaScript進行了拓展的語言，比如React的JSX；
  Babel其實是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
  // npm一次性安裝多個依賴模塊，模塊之間用空格隔開

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
// 配置Babel、允許使用ES6以及JSX的語法
module: {
rules: [
{
    test: /(\.jsx|\.js)$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [
                "env", "react"
            ]
        }
    },
   exclude: /node_modules/
}
]
}
*****babel-loader和babel-core版本要相鄰不然會報錯*****
babel-loader 8.x對應babel-core 7.x
babel-loader 7.x對應babel-core 6.x