5分钟带你走进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 哈哈哈
明天的你一定会感谢现在拼命的自己！
4102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
