高明网站设计案例,鞍山网站建设制作,电子商务服务网站,虚拟现实专业和动漫制作专业构建工具
简介
当我们习惯了在node中编写代码的方式后#xff0c;在回到前端编写html、css、js这些东西会感觉到各种的不便。比如#xff1a;不能放心的使用模块化规范#xff08;浏览器兼容性问题#xff09;、即使可以使用模块化规范也会面临模块过多时的加载问题。我们…构建工具
简介
当我们习惯了在node中编写代码的方式后在回到前端编写html、css、js这些东西会感觉到各种的不便。比如不能放心的使用模块化规范浏览器兼容性问题、即使可以使用模块化规范也会面临模块过多时的加载问题。我们就迫切的希望有一款工具可以对代码进行打包将多个模块打包成一个文件。这样一来即解决了兼容性问题又解决了模块过多的问题。构建工具就起到这样一个作用通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法这样可以使得所有的浏览器都可以支持代码。
Webpack
概念
本质上webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时它会在内部从一个或多个入口点构建一个依赖图(dependency graph)然后将你项目中所需的每一个模块组合成一个或多个 bundles它们均为静态资源用于展示你的内容。【按需打包】 webpack在node中运行 使用步骤
初始化项目yarn init -y安装依赖webpack、webpack-cli在项目中创建src目录然后编写代码默认主文件index.js执行yarn webpack来对代码进行打包打包后观察dist目录 cli: command line interface 命令行工具 安装依赖yarn add -D webpack webpack-cli, -d表示设置为开发依赖 src 目录下的是遵循前端开发规范的src 以外的要用node规范CommonJS 配置文件webpack.config.js
const path require(path)
module.exports {mode: production, entry: ./src/index.js,output: {}, module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader]}]}
}书写对象的时候可以在最后一个属性值后面加上,并且属性名可以不为字符串 但在写JSON的时候属性名也需要加上“”并且最后不能加上, mode
告知 webpack 使用相应模式的内置优化
none不使用任何默认优化选项production生产模式development开发模式
entry
默认值是 ./src/index.js一般不改约定优于配置
单个入口语法【最常见】 entry: string | [string]多个传数组 entry: [./src/file_1.js, ./src/file_2.js]对象写法分别命名打包 entry: {app: ./src/app.js,adminApp: ./src/adminApp.js,},
output
默认值是 ./dist/main.js其他生成文件默认放置在 ./dist 文件夹中 filename: bundle.js 设置打包后的文件名 多个入口 entry 的情况 filename: [name]-[id]-[hash].js 使用 占位符(substitutions) 来确保每个文件具有唯一的名称很少用 clean: true 自动清理打包目录path指定的目录只保留当前这次打包的文件 path: 指定打包目录必须要绝对路径 一般会使用Node.js中的path模块来操作文件路径 const path require(path); //引入path模块
path.resolve(__dirname, dist) //表示当前目录下的dist文件夹loader
loader 让 webpack 能够去处理其他类型的文件默认只能处理js文件并将它们转换为有效 模块以供应用程序使用以及被添加到依赖图中。
使用步骤 安装对应的 loaderyarn add css-loader style-loader ts-loader -D 配置方式推荐 test 属性识别出哪些文件需要被转换使用正则表达式/\.css$/iuse 属性定义出在进行转换时使用哪个 loader字符串、数组、对象type 属性加载图像资源设置为asset/resourceexclude 属性不需要转换的文件夹正则表达式 module.exports {module: { // 易漏点rules: [ { test: /\.css$/, use: [style-loader,css-loader] },{ test: /\.ts$/, use: ts-loader },{ test:/\.(jpg|png|gif)$/i,type:asset/resource },],},
};css-loader 只负责打包style-loader 负责渲染生效【单一职责原则】 loader 执行顺序为从后向前执行因此 use 的数组顺序不能调换 *内联方式在每个 import 语句中显式指定 loader。 使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。 import Styles from style-loader!css-loader?modules!./styles.css;使用!前缀将禁用所有已配置的 normal loader(普通 loader)使用!!前缀将禁用所有已配置的 loaderpreLoader, loader, postLoader使用-!前缀将禁用所有已配置的 preLoader 和 loader但是不禁用 postLoaders 选项可以传递查询参数例如 ?keyvaluefoobar或者一个 JSON 对象例如 ?{key:value,foo:bar}。 尽可能使用 module.rules因为这样可以减少源码中样板文件的代码量并且可以在出错时更快地调试和定位 loader 中的问题。
babel
概念 在编写js代码时经常需要使用一些js中的新特性而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。 但是我们现在希望能够使用新的特性我们可以采用折中的方案。依然使用新特性编写代码但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。 babel就是这样一个工具可以将新的js语法转换为旧的js以提高代码的兼容性。 如果希望在webpack支持babel则需要向webpack中引入babel的loader 是 loader 中的一种
使用步骤 安装 npm install -D babel-loader babel/core babel/preset-env babel-loader连接webpack和babel的中间件babel/corebabel的转换核心babel/preset-env预设环境 配置 module: {rules: [{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: babel-loader,options: {presets: [babel/preset-env]}}}]
}在package.json中设置兼容列表 browserslist: [defaults]配置参考https://github.com/browserslist/browserslist
plugin
概念
插件用来为webpack来扩展功能插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件。
常用插件
html-webpack-plugin
这个插件可以在打包代码后自动在打包目录生成html页面
使用步骤
安装依赖yarn add -D html-webpack-plugin引入依赖const HTMLPlugin require(html-webpack-plugin)配置插件
plugins: [new HTMLPlugin({// title: Hello Webpack, //设置titletemplate: ./src/index.html //模板自动引入script脚本})]devtool
devtool:inline-source-map配置源码的映射方便调试打包后的代码。
开发服务器webpack-dev-server
安装yarn add -D webpack-dev-server启动yarn webpack serve --open--open表示启动服务器后自动打开 配置 webpack –watch 执行在本地文件夹中访问代码发生变化时自动更新打包。 grunt/glup的对比
Vite
概念 Vite也是前端的构建工具 相较于webpackVite采用了不同的运行方式 开发时并不对代码打包而是直接采用**ESMES模块**的方式来运行项目在项目部署时再对项目进行打包 除了速度外Vite使用起来也更加方便开箱即用都配置好了 本质上 Vite 和 Webpack 是打包工具只是 Webpack 比较底层需要自己手动去配置。 ESM 必须通过 url 加载页面即需要通过服务器运行
基本使用 安装开发依赖 Vite yarn add -D vite Vite 的源码目录默认就是项目**根目录** 在页面中引入 js 文件的时候要指定 type“module”修改路径直接在 script 标签中修改 src 属性正确即可webpack需要配置 开发命令 vite 启动开发服务器 vite build 打包代码 vite preview 预览打包后代码 使用命令构建项目
npm create vitelatest #使用 NPM
yarn create vite #使用 Yarn
pnpm create vite #使用 PNPM
#Vanilla 表示原生JS开发项目使用插件 安装插件npm add -D vitejs/plugin-legacy vitejs/plugin-legacy兼容传统浏览器的语法转换插件 配置文件vite.config.js // vite.config.js
import legacy from vitejs/plugin-legacy //引入插件
import { defineConfig } from vite //语法提示可选
export default defineConfig({ //写上defineConfig配置时会有提示plugins: [ //配置插件legacy({targets: [defaults, IE 11], //配置兼容版本}),],
}) 需要使用ES6的模块化export default去暴露文件区别于 webpack 使用require
学习自李立超老师
