webpack4學習（React）--重點細節整理筆記（Webpack 4 教程：從零配置到生產釋出--http://www.css88.com）
一、開始配置webpack4開發環境
- cmd開啟操作介面
- mkdir 檔名 && cd 檔名 ------建立專案並進入專案目錄
- npm init -y ------初始化建立package.json檔案，-y的意思是初始化時全部選擇yes，不需要每一步都確認
- 因為webpack的cli在webpack4版本之前是和webpack在一起的，而webpack4將其分開，為了更好的管理，所以必須同時引入webpack4與webpack-cli ，使用命令npm i webpack webpack-cli --save-dev（i是install的縮寫，--save-dev表示非全域性安裝，僅在此專案下安裝）
- 配置package.json檔案新增“script”{“build”:"webpack"}
- 此時執行npm run build，會報錯，在webpack4之前的版本，需要在webpack.config.js配置entry入口檔案，而現在預設的入口檔案是./src/index.js，只需在專案中建立src資料夾，並新建index.js檔案，即可正常執行npm run build
- webpack的輸出檔案也不需要定義，預設的輸出目錄是./dist/main.js，執行後會預設將檔案打包至dist目錄中，此檔案不需要自建
二、webpack4的兩種開發環境development（開發）、production（生產）
- 在webpack4之前，開發環境和生產環境需要兩個不同的檔案來控制
- 在webpack4中只需要在package.json執行時設定相應的執行模式即可：設定“script”{“build”:“webpack --mode development”,“dev”:“webpack --mode production”}，此時如果執行npm run build 打包成的檔案是經過壓縮的，而npm run dev打包而成的檔案是未壓縮的
- 兩種模式的效果：開發模式執行速度提升了，生產環境進行了壓縮和作用域提升等
三、覆蓋對應的入口檔案及出口檔案
- 只需在package.json中配置對應的檔案位置
例：我的專案檔名字為testwebpack
“script”:{
"build":"webpack --mode production .testwebpack/src/index2.js --output .dist/main2.js "
"dev":"webpack --mode development .testwebpack/src/index2.js --output .dist/main2.js "
}
四、使用Babel將ES6轉換為ES5
4.1 安裝babel相關的載入項
命令：npm i babel-core babel-loader babel-preset-env --seve-dev
1、babel-core（babel編譯器的核心，如果想使用babel-loader進行編譯，必須安裝babel-core，安裝完不需要引用）
2、babel-loader（webpack中需要引用的loader）
3、babel-preset-env（用於將ES6程式碼編譯為ES5程式碼，此方式推薦使用）
babel-preset-env的優勢在於按需編譯：例如使用babel-preset-es2015的時候會將大部分瀏覽器都支援的generator函式也編譯，這是沒有必要的，而babel-preset-env可以宣告環境，只會編譯環境中不支援的特性。
4、建立babel的配置檔案.babelrc，
檔案內容：
{
"presets":["env"]
}
4.2 babel-loader的兩種使用方法
1、通過配置檔案新增（webpack4零配置的口號當前僅限於①入口檔案、②出口檔案、③執行環境三者不需要配置，其他loader仍然需要配置，如果想改變入口檔案和出口檔案，才需要在配置檔案中寫entry屬性與output屬性），新增配置檔案webpack.config.js，內容如下：
module.exports = {
module: {
rules: [ {
test: /\.js$/,//匹配的副檔名
exclude: /node_modules/, //排除不需要編譯的檔案，加快編譯速度
use: {
loader: "babel-loader"
}
}]
}
};
2、不通過配置檔案用babel-loader檔案，在webpack.json中配置，--module-bind 引數在命令列指定載入器（不建議使用，最好不增加scripts的複雜性），如下：
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
五、在React中使用webpack4
1、安裝React
npm i react react-dom --save-dev（react 是react的核心程式碼，react的核心是虛擬DOM，即使用js物件來表達一個DOM的包含；react-dom的核心功能就是將這些虛擬的DOM編譯成為實際的DOM）
2、安裝babel-preset-react
npm i babel-preset-react --save-dev（babel-preset-react: 轉義react的jsx語法）
3、設定.babelrc
{"presets": ["env", "react"]}
4、配置webpack.config.js載入loader
module.exports = {
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
5、運用es6語法編寫js檔案或者jsx檔案，接下來在 ./src/index.js 中 import(匯入) 元件（import App from "./App";）
6、最後執行npm run build
7、此時看不到介面效果，我們需要引入其他元件來編譯頁面html-webpack-plugin 和 html-loader；安裝html-webpack-plugin（打包時自動生成html檔案，幷包含css、js檔案的引用）、html-loader（html-loader 將解析 URL，並請求圖片和你所期望的一切資源）
命令：npm i html-webpack-plugin html-loader --save-dev
配置webpack.config.js：
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
8、在 ./src/index.html中新建html檔案
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
9、執行npm run build（此時頁面已經有顯示）
10、配置載入css：mini-css-extract-plugin（webpack4.2.0以上才可用，將css提取到檔案中）
npm i mini-css-extract-plugin css-loader --save-dev
在index.js中匯入css檔案，然後配置webpack.config.js
配置如下：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
11、配置webpack dev server（每次更改，自動更新介面，開發時使用非常方便）
安裝命令：npm i webpack-dev-server --save-dev
配置package.js
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
執行npm run start，修改檔案即可動態更新介面效果
有些程式碼是從別處引用，自己整理文件，主要用於自己參考學習-.-
附：
babel常見外掛作用
* babel: ES6轉義的核心包
* babel-cli: 用於在終端使用babel,用命令列轉碼
* babel-core: 如果某些程式碼需要呼叫Babel的API進行轉碼，就要使用`babel-core`模組
* babel-loader: 執行轉義的核心包
* babel-plugin-react-transform: 代替react-hot-loader的外掛
* babel-preset-es2015: 現在被babel-preset-env取代了，被babel未來不會過時的（future-proof）”解決方案
* babel-preset-react: 轉義react的jsx語法,
* babel-preset-stage-0: ”stage-0"是對ES7一些提案的支援，Babel通過外掛的方式引入，包含stage-1, stage-2以及stage-3的所有功能
完！