webpack

1.什么是webpack有什么用.

webpack是一个现代Javascript应用程序的静态模块打包器.
    静态:文件资源
    模块:node环境,引入文件,遵守模块化语法.
还可以翻译和压缩代码.减小代码包体积,让浏览器更快速的打开网页

2.学习webpack的准备工作

2.1准备.
   环境准备：它是基于nodejs，所以本机一定要先安装了node。
   项目准备：webpack是用来对已有项目进行**打包**，所以一定是在某个项目下进行应用打包。
   知识准备：模块化（es6, commonjs模块化均可）
2.2操作顺序.
    1.  安装node
    2.  用npm init 初始化项目(如果已经有package.json，则跳过这一步)
    3.  在当前项目中安装并使用webpack

3.项目初始化

任意创建一个空文件夹,在这里我们取名字为,demo,进入到文件夹内部,打开cmd.用npm init -y 命令来生成一个package.json

4.准备初始代码.

创建三个文件,index.html.index.js,tool.js 然后搭建项目结构.

项目名
├── index.html
├── index.js
├── tool.js
└── package.json

在index.html中写下如下代码.

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>index</title>
  </head>
  <body>
    <div id="app">
      
    </div>
    <!-- 引入两个js文件 -->
    <script src="./tool.js"></script>
    <script src="./index.js"></script>

</body>
</html>

tool.js代码

const updateDom = (id, content) =>{
    window.document.getElementById(id).innerHTML =  content
}

index.js

updateDom ('app','index.html')

说明:

在一个html中引入多个js文件，并且要注意它们的顺序关系。
script代码在body的底部，这样可以确保是dom节点渲染在js代码执行之前。上面的代码中有如下问题：
js文件之间有先后的引用的关系：由于index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。
存在变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。
随着.js文件个数增加，则项目会越来越不好管理解决思路:模块化+webpack打包.

接下来到我们的重头戏.安装并使用webpack.

安装webpack

webpack是一个工具，对于所有的项目都可以来使用，从这个意义上来讲，它是可以去全局安装的，但是，考虑到不同的项目中可能使用了不同的webpack版本，所以不推荐大家去全局安装。特别是打开一个老项目时，一定要注意一下它的webpack的版本号。

打开cmd窗口安装,输入下面这串命令:npm i webpack webpack-cli -D

下面通过命令行工具来检测是否安装成功.

# 方式一：
node_modules\.bin\webpack -v
# 方式二：
npx webpack -v

注意:

由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。
npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。在这里，我们通过它来调用项目安装的模块，它在运行时会在node_modules/.bin中去检查命令是否存在。

在tool.js导出模块.

更改之后的代码.
export const updateDom = (id, content) => {
  window.document.getElementById(id).innerHTML = content
}

在index.js导入模块.

更改之后的代码
import { updateDom } from "./tool.js"
updateDom('app', 'index.html')

由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错.

我们接下来就需要使用webpack命令来对index.js进行处理了.

使用webpack来做打包.

命令是:npx webpack 文件名

我们只需要在小黑窗输入,npx webpack ./index.js 因为我们的文件名字叫index.js 你也可以根据你的文件名来输入这行命令.

这时会自动生成一个dist文件夹,合并的代码打印在文件夹里面的main.js里面

在HTML里面引入main.js

如何使用webpack打包文件.