Webpack
20180710
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
简化版打包过程：
- 从入口文件开始，分析所有依赖（如搜索关键字 “import”）；递归
- 翻译： 如ES6转成正常js等；根据配置的loader来处理
- 分析是否属于同一个chunk （简单区分：主代码&异步代码）
- 合并 module （如 index.js 和 HelloWorld.js 就可合并成同一个）
- 是否属于 ESM
- 是否属于 normal import（如非开头就import，而是在代码执行中再import的情况）
- 是否属于同一个 chunks
- 是否 all importer must be included
- ？ try all dependencies optionally
- 分配 ID
- 合并文件
image
配置一个 React 项目
初始化
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.
文件目录结构
+-- public
| +-- index.html
+-- src
| +-- App.css
| +-- App.js
| +-- index.js
+-- .babelrc
+-- .gitignore
+-- package-lock.json
+-- package.json
+-- webpack.config.js
启动
webpack-dev-server --mode development
react-hot-loader
import React, { Component} from "react";
import {hot} from "react-hot-loader";
...
export default hot(module)(App);
资料
- webpack原理学习： https://www.jianshu.com/p/b36239be4d95
- Creating a React App… From Scratch. https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658
