关于webpack:webpack-学习笔记快速入门

所谓疾速入门，就是实践这种货色咱们都先不讲，间接进入正题，上手去应用 webpack！
然而呢，也只能仅限于入门级的应用，等咱们通过根本应用对 webpack 有个初步印象后，咱们仍然还是须要去从实践从细节去残缺的学习 webpack。

在本地新建一个空文件夹来作为这次入门练习的我的项目根目录。

在命令行工具（终端）中进入该文件目录，执行以下命令对我的项目进行初始化：

npm init -y

该命令会应用默认参数在我的项目根目录中创立出 package.json 文件。

在我的项目根目录中执行以下命令装置 webpack 和 webpack-cli。

npm i --save-dev webpack webpack-cli

在我的项目根目录中新建 src/index.js 和 src/a.js 两个文件，代码如下：

// src/a.js
export const name = "有猫饼";
console.log('a.js', name);

// src/index.js
import {name} from './a.js';
console.log(name);

在我的项目根目录创立一个 index.html 文件，将 src/index.js 文件引入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script src="./src/index.js"></script>
</body>

</html>

在浏览器中运行 index.html 代码会发现如下报错：

报错起因是因为咱们没方法在模块以外的文件中应用 import 的语法。

在我的项目根目录中执行以下命令，打包 JS 文件：

npx webpack

打包胜利后，在我的项目根目录会主动生成一个 dist/main.js 文件。

这个 JS 文件，就是对 src/index.js 和 src/a.js 打包之后失去的文件。

在 index.html 中引入打包之后的 dist/main.js 文件：

<script src="./dist/main.js"></script>

刷新浏览器从新运行代码。

能够看到，打包之后的代码，浏览器就能够失常的解析并运行了。

通过下面这个疾速入门的小练习，咱们对 webpack 也应该有了一个初步的印象，至多能够小小的总结一些知识点了：

webpack 能够打包 JS 文件；
webpack 能够将浏览器不能辨认的 JS 代码打包成浏览器可能辨认的 JS 代码；
webpack 能够将多个 JS 文件打包成一个 JS 文件。

关于webpack:webpack-学习笔记快速入门

1. 我的项目初始化

2. 装置 webpack

3. 创立我的项目代码

4. 运行我的项目代码

5. webpack 打包 JS 代码

6. 运行打包文件

7. 小结