网站的页面风格有哪些,萝卜建站app,美容视频视频网站建设,wordpress自动采集规则1.webpack概念
本质上#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)#xff0c;然后将你项目中所需的每一个模块组合成一个或多个 …1.webpack概念
本质上webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)然后将你项目中所需的每一个模块组合成一个或多个 bundles它们均为静态资源用于展示你的内容。
2.webpack安装
1.webpack的依赖于node环境的所以电脑必须有Node环境。
没有node环境请参考node官网
node -v 查看
npm -v 查看2.安装webpack之前需要先安装一个npm的包管理的配置文件
npm init -y3.安装webpack和webpack-cli
npm i webpack webpack-cli -d (局部)
npm i webpack webpack-cli -g (全局不推荐)3.webpack常用置项的作用
1五个核心概念
Entry入口起点(entry point)指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。Outputoutput 属性告诉 webpack 在哪里输出它所创建的 bundles以及如何命名这些文件默认值为 ./dist。Loaderloader 让 webpack 能够去处理那些非 JavaScript 文件webpack 自身只能解析 JavaScript。Plugins插件则可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩一直到重新定义环境中的变量等。Mode模式有生产模式production和开发模式development
4.webpack小demo
步骤1
根目录新建webpack.config.js文件
//获取当前的目录
const {resolve} require(path);//node用法
module.exports {//入口配置项entry:./index.js,//出口项配置output:{filename:built.js,path:resolve(__dirname,build)},//设置为开发环境mode:development,
}根目录新建index.js文件运行webpack之后根目录出现build文件夹
步骤2: 安装typescript环境npm i typescript -g然后tsc -v查看版本号并初始化typescript环境tsc --init 将index.js文件改成index.ts并在根目录新建src文件里components文件夹新建一个组件并在index.ts文件引入并使用。 运行webpack之后报错因为我们没有指定好模块的解析方式我们需要跟着官网文档使用resolve.extensions。webpack.config.js文件追加了 extensions: [‘.ts’, ‘…’]也可以保留的默认的扩展
resolve: {extensions: [.js, .ts],},根目录新建public文件创建index.html文件npm i html-webpack-plugin并在webpack.config.js文件使用后 作用1.自动在内存中根据指定页面生成一个内存的页面 2.自动把打包好的bundle.js追加到页面中去
const HtmlWebpackPlugin require(html-webpack-plugin);plugins: [new HtmlWebpackPlugin({template: ./public/index.html,filename: index.html,}),],步骤3: 配置webpack what5 ts react
npm i react react-dom types/react types/react-dom babel/preset-react 安装依赖 reactreact核心依赖typescript支持 tsreact-dom负责处理web端的dom的渲染types/react react 类型声明文件用于 tsxtypes/react-domreact-dom 类型声明文件用于 tsxbabel/preset-react 用于让 babel 可以转译 jsx 语法babel/preset-typescript处理ts文件原理是去掉ts的类型声明然后再用其他 babel 插件进行编译babel/plugin-proposal-decorators 和babel/plugin-proposal-class-properties支持并编译decorator语法, 需要在tsconfig.ts中进行如下设置experimentalDecorators: true 入口文件改成.tsx结尾的
import React from react
import ReactDom from react-domReactDom.render(//这里react脚手架中引入的时app.js组件这里直接写死了h1Hello React/h1,document.getElementById(root)
)在tsconfig.json里面增加对tsx文件的支持jsx: react运行webpack之后报错要处理.tsx格式的执行因为浏览器只能识别js文件需要执行npm i ts-loader之后webpack.config.js增加module配置修改resolve配置
module:{rules:[{test: /\.(js?|ts?|tsx?|jsx?)$/,use: [{loader: babel-loader,options: {// 开启babel的缓存cacheDirectory: true,presets: [[babel/preset-env,{// useBuiltIns: usage 会根据配置的浏览器兼容实现了按需添加useBuiltIns: usage,corejs: 3,// 不以commonjs打包方便tree-shakingmodules: false,},],babel/preset-react,babel/preset-typescript,],plugins: [[babel/plugin-proposal-decorators, { legacy: true }],[babel/plugin-proposal-class-properties],],},},],},]},
resolve:{extensions:[.ts,.tsx,...]
},步骤4基本配置 根目录新建 1.gitignore文件——总会有些文件无需纳入git的管理也不希望它们出现在未跟踪文件列表想忽略文件的作用
node_modules
**/node_modules
.DS_Store
doc/userName.md
/dist 2public文件夹存放项目的静态资源
3build文件夹存放webpack的配置文件
4src存放项目项目的代码文件 在build文件里面新增三个文件webpack.common.js、webpack.dev.js、webpack.prod.js用于区分环境的配置两个环境有够公共部分使用第三方工具webpack-merge将公共配置导入对应文件中功能类似于 JavaScript 的 Object.assign()。 // build/webpack.prod.js
const { merge } require(webpack-merge)
const path require(path)const common require(./webpack.common)
const { PROJECT_PATH } require(../constant)module.exports merge(common, {mode: production,devtool: false,output: {filename: js/[name].[contenthash:8].js,path: path.resolve(PROJECT_PATH, ./dist)},
}) // build/webpack.dev.js
const HtmlWebpackPlugin require(html-webpack-plugin);
const { merge } require(webpack-merge);
const baseConfig require(./webpack.common.js);
//获取当前的目录
const { resolve } require(path); //node用法
const PROJECT_PATH resolve(__dirname, ../); // 项目根路径
module.exports merge(baseConfig, {mode: development,output: {filename: js/[name].js,path: resolve(__dirname, dist),},module: {rules: [{ test: /\.tsx$/, use: [ts-loader], exclude: /node_modules/ }],},
}); 哈希值区别 hash 每次修改任何一个文件所有文件名的hash至都将改变所以一旦修改了任何一个文件整个项目的文件缓存都将失效 chunkHash 根据chunk生成的hash值如果打包来源于同一个chunk那么hash值就一样chunkHash不适用于同一chunk的文件如一个js文件导入了一个css文件他们属于同一个chunk因此若只修改了js最终打包出来的文件cs和js都会变成一个新的hash contenthash 根据文件内容生成hash值不同文件的hash值一定不一样只要文件内容不做修改一定是同一个hash有变动则会替换成另外的这样就令浏览器只清楚掉变动文件的缓存只有改动的文件重命名了 npm i cross-env配置统一的Node环境变量 在node中全局变量 process 表示的是当前的node进程process.env 包含着关于系统环境的信息。
使用 process.env.NODE_ENV获取当前环境scripts: {dev: cross-env NODE_ENVdevelopment webpack-dev-server -- config build/webpack.dev.js,build: cross-env NODE_ENVproduction webpack -- config build/webpack.prod.js,
}npm i webpack-dev-server提供本地服务参考链接 devServer的配置功能如下 historyApiFallback: 使用HTML5 History API时index.html可能需要提供页面来代替任何404响应 static: 该配置项允许配置从目录提供静态文件的选项默认是 ‘public’ 文件夹 client: 允许在浏览器中设置日志级别 proxy: 当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时代理某些 URL 可能会很有用。 host服务ip port服务端口 stats设为errors-only表示终端只打印错误类型的日志不会打印warning以及其他信息影响阅读 compress设为true表示启用gzip压缩加快网站打开速度 open设为true表示第一次启动项目时自动打开默认浏览器 hot设为true表示启用服务热替换配置 clientLogLevel设为none表示去除多余网页console信息 … // build/webpack.dev.js
devServer: {historyApiFallback: true,// noInfo: true,static: [{directory: path.join(__dirname, ../public),// serveIndex: {} (options for the serveIndex option you can find https://github.com/expressjs/serve-index)// serveIndex: true,},],client: {overlay: {errors: true,warnings: false,},logging: error,progress: true,reconnect: 3,},hot: true,compress: true,// open: true, //在mac上为true才会打开浏览器故在node启动文件又添加了openopen: {app: {name: google-chrome,arguments: [--new-window],},},proxy: {/: {},},},为了实现js的热替换此时需要在入口文件的执行代码最开始处配置一下 module.hot.accept 逻辑 ts报错安装第三方插件解决 npm i types/webpack-env包含 webpack 的 api 声明文件 // index.tsx
if (module module?.hot) {module?.hot.accept();
}进度条npm i webpackbar展示 // build/webpack.common.js
const WebpackBar require(webpackbar)
module.exports {plugins: [new WebpackBar({name: Link Startou!!!, color: #52c41a }),]
} 分别运行npm run dev和npm run build查看效果
步骤5: 配置css——webpack支持原生js和html打包需要下载第三方包并配置 npm i style-loader将 js 文件中引入的 css 代码插入到 html 模板文件使网页可以正常展示样式 npm i mini-css-extract-plugin和 style-loader 功能一样只是打包后会单独生成 css 文件而非直接写在 html 文件中用于生产环境开发环境不需要另外生成文件使用 style-loader 即可 npm i css-loader令 js 可以通过 import 或者 require 等命令导入 css 代码 modules开启 css module看个人习惯如果不使用可以直接置值 false否则影响打包速度localIdentName 表示自定义类名为了确保类名全局统一加上哈希值sourceMap为 true 时会根据 devtool 映射css错误生产环境不需要映射所有这里给的值是开发环境 压缩优化css npm i css-minimizer-webpack-plugin压缩生产环境打包后的css文件 optimization在 webpack4 之后添加了 optimization 属性专门用于存放优化打包的配置minimizer属性存放一个数组里可以存放用于代码压缩的插件minimize 置 true 表示启用 minimizer 配置 浏览器兼容问题 npm i postcss-loader与 sass/less 不同不是预处理器相当于一个工具箱可以使用它配合插件去转换css npm i postcss-preset-env将最新的 css 语法转换为目标环境的浏览器能够理解的语法不用考虑浏览器兼容问题以前需要配合 autoprefixer 第三方包自动补全前缀现在新版本已经内置autoprefixer功能 处理css的时候需要添加浏览器前缀插件的选择结合上面代码autoprefixer可为css添加浏览器前缀 1根目录新建.browserslistrc文件或者在package.json配置browserslist属性 2配置 browserslist 字段会导致 webpack-dev-server 的热更新功能直接失效为了避免这种情况需要给 webpack 配上 target 属性——webpack.dev.js中增加 target: ‘web’webpack.prod.js中增加 target: ‘browserslist’
// package.json文件
{browserslist: [ //注意是一个数组last 1 version, 1%,maintained node versions]
}
//.browserslistrc文件
last 2 versions # 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本2% # 全球超过0.5%人使用的浏览器可以通过 caniuse.com 查看不同浏览器不同版本占有率// build/webpack.prod.js
const CssMinimizerPlugin require(css-minimizer-webpack-plugin)
module.exports merge(common, {// ...otheroptimization: {minimize: true,minimizer:[new CssMinimizerPlugin()]}
})// build/webpack.common.js
const getCssLoaders () {const isDevelopment process.env.NODE_ENV developmentconst isProduction process.env.NODE_ENV productionconst cssLoaders [isDevelopment ? style-loader : MiniCssExtractPlugin.loader, {loader: css-loader,options: {modules: {localIdentName: [local]--[hash:base64:5]},sourceMap: isDevelopment,}}]// 开发环境一般用chrom不会有问题防止开发环境下看样式有一堆前缀影响查看因此只在生产环境使用isProduction cssLoaders.push({loader: postcss-loader,options: {postcssOptions: {plugins: [isProduction [postcss-preset-env,{//开启自动添加前缀功能有些功能是默认关闭的如栅格样式一些浏览器不支持所以默认关闭了这里手动打开autoprefixer: {grid: true}}]]}}})return cssLoaders
}module: {rules: [{test: /\.css$/,use: [...getCssLoaders()]},
}预处理器 npm i less-loader将less文件编译成css文件再做上述css文件的打包工作。npm i less
// build/webpack.common.js
module: {rules: [{test:/\.less$/,use:[style-loader,css-loader,less-loader]},
}打包图片资源及打包img标签中的图片 方法1npm i url-loader npm i file-loader 处理打包图片资源 module: {rules: [{test: /\.(png|jpe?g|gif|webp)$/,// 要使用一个loader// 下载 url-loader file-loaderdependency: { not: [url] },use:[{ loader: url-loader,options: {// 图片大小小于8kb就会被base64处理// 优点:减少请求数量减轻服务器压力// 缺点图片体积会更大(文件请求速度更慢)limit: 8 * 1024,// 问题因为url-loader默认使用es6模块化解析而html-loader引入图片是commonjs// 解析时会出现问题[object Module]// 解决:关闭url-loader的es6模块化使用commonjs解析esModule:false,// 给图片进行重命名// [hash:10]取图片的hash前10位// [ext]取文件原来拓展名name:[hash:10].[ext]},}],type: javascript/auto},{test: /\.html$/,// 处理html文件的img图片负责引入img从而能被url-loader进行处理loader: html-loader,}
}方法2webpack新方法资源模块(asset module)是一种模块类型它允许使用资源文件字体图标等而无需配置额外 loader。 四种新的模块类型 asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader并且配置资源体积限制实现。 // build/webpack.prod.js
//在output中统一Asset Module 输出路径
output: {publicPath: /,filename: js/[name].[contenthash:8].js,path: pathResolve(../dist),assetModuleFilename: images/[name].[contenthash:8].[ext],},// build/webpack.common.js
module: {rules: [{// 处理图片资源 webpack5图片新打包方法test: /\.(png|jpe?g|gif|webp)$/,// webpack5中使用assets-moduleurl-loader已废弃type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024,// 小于10kb的图片会被base64处理}},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],publicPath: ./}},{test: /\.html $/,// 处理html文件的img图片负责引入img从而能被url-loader处理// webpack5中使用 html-withimg-loader代替loader: html-loaderloader: html-withimg-loader}
}打包统一字体 资源模块(asset module)是一种模块类型它允许使用资源文件字体图标等而无需配置额外 loader。默认情况下asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。
// build/webpack.common.jsmodule: {rules: [{// 加载字体图标test: /\.(eot|ttf|svg|woff)$/,type: asset/resource,generator: {// 输出到 font 目录中占位符 [name] 保留原始文件名// [hash] 防止出现相同文件名无法区分[ext] 拿到后缀名filename: font/[name].[hash:6][ext],},},],},
步骤6
css压缩 npm install mini-css-extract-plugin --save-dev npm install css-minimizer-webpack-plugin --save-dev
// build/webpack.common.js
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);module.exports {optimization: {minimizer: [// 在 webpack5 中你可以使用 ... 语法来扩展现有的 minimizer即 terser-webpack-plugin将下一行取消注释// ...,new CssMinimizerPlugin(),],},plugins: [new MiniCssExtractPlugin()],
};
js压缩 terser-webpack-plugin用去去除生产环境的无用js代码webpack5 之后自带不需要另行安装直接引入使用即可 extractComments设为 false 表示去除所有注释除了有特殊标志的注释如 preserve 标记pure_funcs去除函数如上述配置的意思是将所有 console.log 函数去除
// build/webpack.prod.js
const TerserPlugin require(terser-webpack-plugin)module.exports merge(common, {optimization: {minimize: true,minimizer:[new TerserPlugin({extractComments: false,terserOptions: {compress: { pure_funcs: [console.log] },}}),]}
})
清除打包数据 clean-webpack-plugin清除上一次打包的 dist 目录内容防止文件残留
// build/webpack.common.js
const { CleanWebpackPlugin } require(clean-webpack-plugin)
module.exports {...plugins: [...new CleanWebpackPlugin(),],
}缓存机制——大大增快二次编译速度webpack5 已内置该功能【cache机制及配置参考】 cache.type缓存类型值为 memory 或 filesystem分别代表基于内存的临时缓存以及基于文件系统的持久化缓存 cache.buildDependencies全局缓存失效的一种机制配置 {config: [__filename]}表示当配置文件内容或配置文件依赖的模块文件发生变化时当前的构建缓存即失效
// build/webpack.common.js
module.exports {cache: {type: filesystem,buildDependencies: {config: [__filename],},},
}代码分割——当使用懒加载写法时webpack自动会对代码进行分割成不同的chunk 浏览器缓存可缩短网页交互时间降低首屏时间
// 在react中比较常见的是React.lazy
const MyComponent React.lazy(() import(Components/MyComponent))将第三方依赖打包独立chunk需要在webpack额外进行配置
splitChunks代码分割相关配置
splitChunks.chunks选择哪些内容进行优化如果为 all 时表示即使同步和异步的代码也可以共享thunk
minSize生成chunk的最小大小以字节为单位
// build/webpack.dev.js
module.exports merge(common, {optimization: {minimize: false,minimizer: [],splitChunks: {chunks: all,minSize: 0,},},
})// build/webpack.prod.js
module.exports merge(common, {optimization: {// ...othersplitChunks: {chunks: all,minSize: 0,},}
})
