Webpack 静态模块打包工具

概要

Webpack 静态模块打包工具

作用：根据以来关系把不同的模块根据不同的规则打包成一个或者多个文件

Step one：

npm init —> pakage.json 项目初始化完成，生成pakage.json文件，存储整个项目信息包括依赖、版本等，阅读他人项目，也从此开始

Step two：

生成项目的目录结构 必要HTML模版文件夹、工程代码文件夹、静态资源文件夹

Step three：

安装基础的依赖（构建工具webpack ｜ gulp ｜ esbuild……）
npm install package --save (–save-dev 注明是开发环境的依赖，否则为全局)

Eg: 使用webpack作为项目的构建工具，则需要以下工具

• webpack 模块打包器：根据依赖编译文件然后输出到output选项的路径中
• webpack-cli：为了项目能够使用webpack命令
• webpack-dev-server ：即webpack+httpserver，将编译好的文件放到内存起服务，本地调试代码

Step four:

scripts 中，添加配置，启动项目

start 项： ‘gulp’ 控制台输入 gulp 直接启动项目，gulp 是默认的打包工具

或者

dev: ‘webpack-dev-server’

bulid： ‘npm run dev’ 控制台输入npm run dev启动项目

Step five:

安装配置 loader : loader 对项目中的 js、scss、ts 等等代码预处理成我们构建工具认识的代码

babel-loader： 预处理react项目的jsx文件代码，相关库如下

• @babel/core：核心库
• @babel/preset-env： es语法转为es5， 新特性无法转换，例Array.includes，注意仅仅是转换语法（要转换内置对象/实例方法使用polyfill，使用useBuiltlns属性控制
  @babel/preset-env导入polyfill的核心，三个可选值entry、usage、false）
  entry： 打包配置入口/文件入口首行写入‘import core-js’，即可根据配置的目标浏览器配置来引入所需要的polyfill usage：参考目标浏览器和代码使用的特性来按需加入polyfill，配合core-js的版本号使用 false：不传入polyfill
• @babel/plugin-reansform-runtime：转换es6、es7的新特性，将由preset-env转换成的helper函数—>转换为使用bable-runtime中的helper函数，减少包的体积
• @babel/preset-react：将react语法转为es5
• @babel/runtime：es6转es5时产生很多helper函数，每个文件转换都会重复生成这些helper函数，因此每个文件直接引入包里的helper函数，减少了文件的体积
  注意：@babel/runtime是helper function的实现方式，是核心；
• @babel/plugin-transform-runtime: 负责管理更好的重复使用@babel/runtime

Step six:

使用html-webpack-plugin插件，配置入口html

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

plugins: [ 

new HtmlWebpackPlugin({ 

Inject: false, //注入选项，true/false/body/head     ----- 是否插入js文件，插入到body头部还是底部 

hash：true, //给script标签中的js文件增加一个随机数，防止缓存bundle.js 

title：生成的html文件的标题 

Filename：生成的html文件的文件名 

template： templaget path 

favicon： 给生成的html文件一个favicon 

chunks: [^] //适用于多页面应用程序，针对多个entryn生成的js文件，使用chunks决定使用那个entry js文件 

excludeChunks： 排除掉一些entry js 

minify： { removeAttributeQuotes: true} 对html文件进行压缩，例子：移除属性的引号 

cache：内容变化时，生成一个新的文件 

showErrors： webpack编译错误时，错误信息包裹在pre标签内，显示错误信息 

chunksSortMode：none/auto/dependency/{function} 决定script标签的引用顺序(无序/默认/按依赖关系排序/自定义函数定排序) 

xhtml： 兼容xhtml的模式引用文件 

}) 

]