5分钟带你走进webpack

webpack
开始表演(哇卡卡)
- React & Webpack
- 布置项目
- 初始化项目
- 安装我们的环境
- 添加TypeScript配置文件
- 写一些代码
- 创建一个webpack配置文件
- 把它们放在一起
- 代码下载：
- 参考资料：

webpack

官网：https://www.webpackjs.com/
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

开始表演(哇卡卡)

React & Webpack

本教程将会教你怎样用 React 和 webpack 写 TypeScript.
如果你要创建一个新项目，请查看 React 入门指南.
在这里，我们假设你已经安装了Node.js 和 npm.
具体安装步骤自行百度.

布置项目

我们从一个新项目开始，我们将其命名为 project, 其实你可以命名为其他任何名字.

mkdir project
cd project

首先，我们将按以下方式构建项目：

project/
├─ dist/
└─ src/
└─ components/

TypeScript 文件将从您的 src 文件夹开始，通过 TypeScript 编译器运行，然后运行webpack，最后进入文件dist下的bundle.js. 我们编写的任何组件都将放在该src/components文件夹中。

让我们布置基本的文件：

mkdir src
cd src
mkdir components
cd …

Webpack最终将为我们生成 dist目录。

初始化项目

现在我们将把这个文件夹变成一个npm包。

npm init

您将获得一系列提示，但您可以随意使用默认值。您可以随时返回并在为您生成的package.json文件中更改这些内容。

安装我们的环境

首先确保全局安装Webpack。

npm install -g webpack

Webpack是一个将代码和可选的所有依赖项捆绑到一个.js文件中的工具。

现在让我们将 React 和 React-DOM 及其声明文件作为依赖项添加到您的package.json文件中：

npm install --save react react-dom @types/react @types/react-dom

该@types/前缀意味着我们还想获取 React 和 React-DOM的声明文件。通常在导入类似路径时 "react"，它会查看react 包本身的内部; 但是，并非所有包都包含声明文件，因此 TypeScript 也会在@types/react包中查找。你会发现我们以后甚至不必考虑这个问题。

接下来，我们将在 awesome-typescript-loader 和 source-map-loader 上添加开发时依赖项。

npm install --save-dev typescript awesome-typescript-loader source-map-loader

这两种依赖关系都可以让 TypeScript 和 webpack 很好地协同工作。awesome-typescript-loader 使用TypeScript 的标准配置文件帮助 Webpack 编译TypeScript代码tsconfig.json。source-map-loader使用TypeScript 的任何源映射输出，在生成自己的源映射时通知webpack。这将允许您调试最终输出文件，就像调试原始 TypeScript 源代码一样。

请注意，awesome-typescript-loader不是typescript的唯一加载器。你可以改用 ts-loader。在这里阅读它们之间的差异.

请注意，我们将TypeScript安装为开发依赖项。我们也可以将TypeScript链接到全局副本npm link typescript，但这是一种不太常见的情况。

添加TypeScript配置文件

您需要将TypeScript文件放在一起 - 您要编写的代码以及任何必要的声明文件。

为此，您需要创建一个tsconfig.json包含输入文件列表以及所有编译设置的列表。只需在项目根目录中创建一个新文件，tsconfig.json并使用以下内容填充它：

{"compilerOptions": {"outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es6","jsx": "react"},"include": ["./src/**/*"]
}

您可以在此处详细了解tsconfig.json文件。

写一些代码

让我们使用React编写我们的第一个TypeScript文件。首先，在src/components文件下创建一个Hello.tsx文件，写入以下内容：

import * as React from "react";export interface HelloProps { compiler: string; framework: string; }export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;

请注意，虽然此示例使用无状态功能组件，但我们也可以使我们的示例更具有一些类别。

import * as React from "react";export interface HelloProps { compiler: string; framework: string; }// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component<HelloProps, {}> {render() {return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;}
}

接下来，让我们使在文件夹src下创建一个·index.tsx·文件：

import * as React from "react";
import * as ReactDOM from "react-dom";import { Hello } from "./components/Hello";ReactDOM.render(<Hello compiler="TypeScript" framework="React" />,document.getElementById("example")
);

我们仅仅将Hell组件导入index.tsx。请注意，不像"react"或者"react-dom"，我们使用相对路径来Hello.tsx-这是很重要的。如果我们不这样做，TypeScript将尝试查看我们的node_modules文件夹。

我们还需要一个页面来显示我们的Hello组件。使用以下内容在根目录下创建文件index.html：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello React!</title></head><body><div id="example"></div><!-- Dependencies --><script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script><!-- Main --><script src="./dist/bundle.js"></script></body>
</html>

请注意，我们从内部包含文件node_modules。React和React-DOM的npm软件包包括.js可以包含在网页中的独立文件，我们直接引用它们以使事情变得更快。您可以随意将这些文件复制到另一个目录，或者将它们托管在内容分发网络（CDN）上。Facebook使CDN托管版本的React可用，你可以在这里相关信息。

创建一个webpack配置文件

在项目目录的根目录下创建一个webpack.config.js文件。

module.exports = {entry: "./src/index.tsx",output: {filename: "bundle.js",path: __dirname + "/dist"},// Enable sourcemaps for debugging webpack's output.devtool: "source-map",resolve: {// Add '.ts' and '.tsx' as resolvable extensions.extensions: [".ts", ".tsx", ".js", ".json"]},module: {rules: [// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }]},// When importing a module whose path matches one of the following, just// assume a corresponding global variable exists and use that instead.// This is important because it allows us to avoid bundling all of our// dependencies, which allows browsers to cache those libraries between builds.externals: {"react": "React","react-dom": "ReactDOM"}
};

你可能想知道那个externals领域。我们希望避免将所有React捆绑到同一个文件中，因为这会增加编译时间，如果库没有更改，浏览器通常可以缓存库。

理想情况下，我们只是从浏览器中导入React模块，但大多数浏览器仍然不支持模块。相反，库传统上使用单个全局变量（如jQuery或）来使自己可用_。这称为“命名空间模式”，webpack允许我们继续利用以这种方式编写的库。通过我们的输入"react": "React"，webpack将发挥其魔力，"react"从React变量中进行任何负载导入。

您可以在此处了解有关配置webpack 的更多信息。

把它们放在一起

运行下面命令：

webpack

会提示你安装 webpack-cli，直接选择安装依然会报错，因为webpack是全局安装的，所以这里的webpack-cli也要全局安装，选择no,然后运行下面的命令进行全局安装。

npm install --save-dev webpack-cli -g

再次运行

webpack

依然会报错，提示：

Error: Cannot find module ‘webpack’

然后运行

npm link wepack --save-dev
因为webpack为全局安装，需要将其连接到webpack，就会解决Cannot find module ‘webpack’.

现在index.html在您最喜爱的浏览器中打开，一切都准备就绪！你应该看到一个页面上写着“来自TypeScript和React的Hello！”

代码下载：

https://github.com/kankanol1/kankan-webpack

参考资料：

https://www.typescriptlang.org/

奇卡奇卡哈哈哈hia hia 哈哈哈

明天的你一定会感谢现在拼命的自己！