webpack

webpack基本概念

webpack是使用nodejs开发出来的一个构建工具，主要用于javaScript应用程序的静态模块打包

默认只能处理js文件

特点： 支持less/sass转换为css 对es6/7/8 语法降级处理（兼容通用） 压缩代码，提高加载速度 几乎支持所有类型的文件打包

webpack使用步骤

1.初始化包环境 yarn init

2.安装依赖包 yarn add webpack webpack-cli -D

3.配置scripts(自定义命令)

"scripts":{
    "build":"webpack" }

问题1：webpacK如何使用呢？

1.默认src/index.js -打包入口文件 ：需要引入到入口的文件才会参与打包

​ 2.执行package.json 里的build命令，间接执行webpack 打包命令

3.打包结果默认输出到dist/main.js

问题2：代码增加后如何打包呢？

1.确保在src/index.js 引入和使用

2.重新执行yarn build 打包命令

问题3.如何修改webpack入口和出口？

1.新建webpack.config.js（webpack默认配置文件）

2.通过entry设置入口文件和路径，通过output对象设置出口路径和文件名

const path = require('path');

module.exports = {
   
  entry: './path/to/my/entry/file.js', //入口文件路径  ”./src/index.js“
  output: {
   
    path: path.resolve(__dirname, 'dist'), //出口文件路径
    filename: 'my-first-webpack.bundle.js',//出口文件名字
  },
};

问题4.build执行流程？

1.先找到 package.json自定义build命令 执行真正的webpack命令，

2.再查看他是否有配置文件？ 如果有就更具配置文件得到配置参数 && 没有就执行默认配置文件

3.找到入口文件src下的index.js 构建依赖关系图编译各个模块文件 输出到指定的文件

问题5.用yarn || npm 下载的包如何作用在前端项目中

借助webpack,把模块和代码打包 ，把打包好的js文件引入到html中

webpack的配置

webpack 文档：Loaders

问题1.如何让webpack打包时，自动生成html文件呢？

1.下载htmL-webpack-plugin插件到开发环境中

yarn add html-webpack-plugin -D

2.webpack.config.js添加配置文件

const HtmlWebpackPlugin = require("html-webpack-plugin"