webpack 4 入口出口的零配置

1. 新建一目錄webpack-4
2. 執行npm init -y
3. 執行命令npm i webpack wepback-cli -D
4. 修改package.json檔案，加入

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

5. 執行命令npm run build
6. 出現入口檔案模組沒找到的錯誤的提示(webpack會自動查詢入口目錄./src，通過編譯入口檔案內容來產生bundle檔案)
7. 之前的webpack版本入口指向通常在webpack.config.js中進行配置
8. 但在webpack 4中入口檔案的配置操作不是一定必須的，它會預設指向./src/index.js檔案
9. 建立src目錄，新建index.js檔案，輸入程式碼console.log('這是webpack 4入口檔案');
10. 執行命令npm run build
11. 將在根目錄下產生一目標目錄dist以及main.js檔案
12. webpack 4也不需要定義出口檔案？是的！webpack 4出口檔案的配置也不是必須的。我們甚至不需要配置任何的配置檔案webpack.config.js就可以進行專案的編譯打包操作，而預設的入口檔案是./src/index.js，預設的出口檔案則是./dist/main.js。

webpack 4 開發模式及產品模式

以往webpack的配置檔案通常有兩種常用型別：

• 開發模式，主要定義本地伺服器等內容；
• 產品模式，可以定義UglifyJSPlugin外掛，sourcemaps等內容；

雖然大型專案可能仍需要2個檔案，但一般情況在webpack 4中可以實現不配置任何一個檔案任何一行程式碼就可以進行專案管理。

檢視之前npm run build的編譯輸出，就可以看到一些警告資訊：

模式選項沒有設定，模式選項可以設定為development或者是production不同的環境模式。

開啟package.json，修改該檔案：

"scripts": {

"dev": "webpack --mode development",

"build": "webpack --mode production"

}
 

將模式引數加入到webpack中去。

執行命令npm run dev，然後檢視./dist/main.js，是的，該檔案是沒有壓縮的程式碼檔案；

執行命令npm run build，然後檢視./dist/main.js，是的，該檔案是已經壓縮的程式碼檔案；

webpack 4 提供了development開發及production產品模式，而只需要設定--mode引數即可，不需要配置檔案操作。

webpack 4 重置入口及出口檔案

修改package.json檔案

"scripts": {
 "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
 "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
 }

可以直接設定入口及--output出口檔案的路徑及檔名

webpack 4 利用Babel進行ES6語法轉換

現代javascript通常都用ES6語法格式編寫，但卻不是所有的瀏覽器都完全支援ES6語法解析，所以需要進行程式碼轉換，得想辦法將ES6程式碼語法轉換成ES5。

實現程式碼語法轉換通常會使用loaders載入器進行操作，需要安裝一些依賴模組進行操作：

• babel-core
• babel-loader
• babel-preset-env

npm i babel-core babel-loader babel-preset-env --save-dev

在專案根目錄建立一檔案.babelrc

{ "presets": [ "env" ] }

這裡有兩種方法可以進行babel-loader的處理：

1. 使用一個配置檔案協助webpack實現
2. 在npm scripts配置中使用--module-bind實現

也許你想webpack 4不是0配置工具嗎？為什麼又需要編寫配置檔案呢？

而webpack 4零配置的方面主要涉及：

1. 入口檔案，預設./src/index.js
2. 出口檔案，預設./dist/main.js
3. 產品模式及開發模式

如果你想在webpack 4中使用loaders載入器，你還是必須配置配置檔案。

新建立webpack.config.js配置檔案：

module.exports = { 
    module: {
         rules: [
             { test: /\.js$/, 
               exclude: /node_modules/, 
               use: { loader: "babel-loader" 
                    }
             } ] 
} };

在配置檔案中並有設定入口及出口檔案內容，除非你想自定義自己的出入口檔案。

開啟./src/index.js檔案，編寫程式碼：

const arr = [1, 2, 3]; 
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;

執行命令npm run build，然後開啟./dist/main.js進行編譯程式碼的檢視。

無配置模式使用babel-loader（使用--module-bind模組繫結操作）

通過--module-bind可以在程式碼行中使用babel-loader解析工具，而該操作在webpack 3中就已經出現，所以並非webpack 4新特性

修改package.json檔案：

"scripts": { 
"dev": "webpack --mode development --module-bind js=babel-loader", 
"build": "webpack --mode production --module-bind js=babel-loader" }

這樣就在命令列模式下直接使用babel-loader的解析操作。

webpack 4：利用webpack 4構建react專案

1. 安裝react模組：npm i react react-dom -S
2. 安裝react的解析模組：npm i babel-preset-react -D
3. 修改.babelrc配置檔案：

{ "presets": ["env", "react"] }

這樣其實就已經好了的！

不過一般會建議利用babel-loader進行js與jsx檔案的解析操作，這需要在webpack.config.js進行相關配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

新建檔案./src/App.js

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <div>
      <p>React here!</p>
    </div>
  );
};

export default App;

ReactDOM.render(<App />, document.getElementById("app"));

修改入口檔案：

import App from "./App";

再進行執行

webpack 4：HTML操作外掛

模組安裝 ：npm i html-webpack-plugin html-loader -D

修改配置：

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"
    })
  ]
};

在入口目錄建立index.html檔案：./src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack 4 quickstart</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

執行命令npm run build，在./dist/目錄下你可以檢視到生成的html檔案，注意：在html檔案中並不需要引入main.js檔案內容，它將會自動注入到html檔案中去，你只需開啟./dist/index.html檔案就可以檢視到React的元件內容了。

webpack 4：分離CSS到單獨檔案

webpack並不知道如何將CSS程式碼進行拆分操作，以往操作通常使用extract-text-webpack-plugin外掛進行實現。

然後不幸的是，該外掛在webpack 4中並不適用。

所以這時就需要使用mini-css-extract-plugin外掛來進行問題的解決。

外掛的安裝：npm i mini-css-extract-plugin css-loader -D

新建CSS檔案./src/main.css

body{

line-height:2;

}

修改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"
    })
  ]
};

在Js中引入CSS檔案，./src/index.js

import style from './main.css'

執行命令npm run build，在./dist目錄下你可以檢視到對應的CSS檔案。

webpack 4：建立本地服務

之前一直使用webpack-dev-server進行本地服務的構建，現在同樣還是可以使用該外掛進行操作

安裝外掛：npm i webpack-dev-server --save-dev

修改package.json配置檔案

"scripts": { 
"start": "webpack-dev-server --mode development --open", 
"build": "webpack --mode production" }

執行命令：npm run start，可以看到服務已經將你的應用進行啟動操作了，並顯示在了瀏覽器中。

                                                                                                                                                     有道雲筆記.子心