Webpack

20180710

本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

簡化版打包過程：

1. 從入口文件開始，分析所有依賴（如搜索關(guān)鍵字 “import”）；遞歸
2. 翻譯： 如ES6轉(zhuǎn)成正常js等；根據(jù)配置的loader來處理
3. 分析是否屬于同一個(gè)chunk （簡單區(qū)分：主代碼&異步代碼）
4. 合并 module （如 index.js 和 HelloWorld.js 就可合并成同一個(gè)）

• 是否屬于 ESM
• 是否屬于 normal import（如非開頭就import，而是在代碼執(zhí)行中再import的情況）
• 是否屬于同一個(gè) chunks
• 是否 all importer must be included
• ？ try all dependencies optionally

5. 分配 ID
6. 合并文件

image

配置一個(gè) React 項(xiàng)目

初始化

npm init; git init
.gitignore

babel

npm install --save-dev babel-core babel-cli babel-preset-env babel-preset-react

.babelrc

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

Webpack

npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: { presets: ['env'] }
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  resolve: { extensions: ['*', '.js', '.jsx'] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [ new webpack.HotModuleReplacementPlugin() ]
};

React

react@16.4.1 and react-dom@16.4.1.

文件目錄結(jié)構(gòu)

+-- public
| +-- index.html
+-- src
| +-- App.css
| +-- App.js
| +-- index.js
+-- .babelrc
+-- .gitignore
+-- package-lock.json
+-- package.json
+-- webpack.config.js

啟動(dòng)

webpack-dev-server --mode development

react-hot-loader

import React, { Component} from "react";
import {hot} from "react-hot-loader";

...

export default hot(module)(App);

資料

1. webpack原理學(xué)習(xí)： http://m.itdecent.cn/p/b36239be4d95
2. Creating a React App… From Scratch. https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658