webpack基本概述

 webpack是一个静态模块打包工具，作用是分析、压缩、打包代码
 

如何下载yarn安装包_win

 1.在黑窗口输入:npm   i   -g   yarn
 2.在终端里面输入:yarn  -v 检查有无版号
 3.初始化包环境在终端输入:yarn  init   -y
 4.在终端输入:yarn  add  webpack  webpack-cli   -D 创建node_modules文件

注意:如果想要卸载webpack webpack 可以输入yarn remove webpack webpack-cli

webpack-基础使用

1.在当前文件夹里面创建文件webpack config.js在里面输入代码:
  module.exports = {
                    mode: "production"
                  }
2.在当前文件夹里面创建一个src文件夹
3.在src文件夹里面创建一个index.js文件
4.在src文件夹里面创建一个add文件夹,在add文件夹里面创建一个add.js文件

js代码被打包的流程图

1.先把add.js文件导出到src.index.js文件
2.src.index.js文件进行导入
3.在终端输入yarn  build会自动生成一个dist文件夹以及一个main.js文件,会将两个文件压缩在main.js文件
4.在终端输入node  .\dist\main.js会显示两个文件合并后的效果

Webpack 默认的入口文件src/index.js所有代码都引入到入口文件内

Webpack 默认的出口文件是dist/main.js

webpack更新打包

src下新增tool/tool.js如何打包?

1.定义数组求和函数导出
2.index.js – 引入tool模块的函数并使用
3.执行 `yarn build` 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)
4.打包后默认生成dist和main.js, 观察其中代码

webpack-配置修改

 1.新建webpack.config.js
 2.填入配置
 3.修改压缩模式
 4.打包观察效果
 

webpack-配置修改新增文件夹及文件

1. 新建webpack.config.js（如果以新建就直接修改内容）
2.填入配置
3.修改入口文件名
4.打包观察效果
5.输入yarn  build生成新的文件夹及文件

代码示例:

后端导入,实现axios功能

 1.在终端下载第三方模块:yarn  add  axios
 2.在index.js里面导入axios包
 3.在所在文件夹里面创建一个public文件夹,并创建一个文件index.html
 4.在终端输入yarn  build生成新的dist文件夹及bundle.js文件
 5.将public文件夹的index.html复制到dist文件夹里面
 6.在dist文件夹里面的index.html导入webpack打包后的文件<script src="./bundle.js"></script>
 7.在dist文件夹里面的index.html打开页面点击按钮在控制台会显示axios引入的文件

如何将把html文件也打包到dist文件夹中，并导入js文件

 1.把html文件也打包到dist文件夹中，并导入js文件，需要使用一个插件: html-webpack-plugin
 2.下载 ： yarn  add   html-webpack-plugin  -D
 3.在终端输入:yarn  build