做交易网站存在什么风险,邢台建设专业网站,北极鱼wordpress,wordpress首页标题副标题1 概念 webpack是一个模块打包工具#xff0c;他将各种不同类型的文件最终都打包成.js、.css、.png、.jpg4个类型的静态资源。 2 特点 模块化开发 用webpack之前#xff0c;项目都是在html中引入一个个js文件来开发#xff1b;而在webpack中#xff0c;一切皆模块#xf…1 概念 webpack是一个模块打包工具他将各种不同类型的文件最终都打包成.js、.css、.png、.jpg4个类型的静态资源。 2 特点 模块化开发         用webpack之前项目都是在html中引入一个个js文件来开发而在webpack中一切皆模块js、css、图片、字体、可以通过import、require来实现模块开发。帮助我们优化代码提升性能 新语法         由于js、css等开发语言的语法在逐渐更新 但浏览器不会实时更新兼容webpack可以使用预处理器loader例如less-loader、sass-loader、babel-loader对文件进行预处理编译例如less、sass、ES6、TS这样使开发者更自由方便是使用最新的语法开发。 主流框架脚手架         一些主流的框架的脚手架例如vue的vue-cli、react的create-react-app都使用了webpack因此可以根据项目需求自由的配置webpack从而提升项目性能 扩展性强、插件机制完善         开发者可以自定义插件、loader 拥有丰富的配置         依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置 社区庞大轮子丰富 3 核心用法 3.1 dependency graph依赖图 webpack处理应用程序递归构建的一个依赖关系图核心就是文件之间的直接依赖关系。webpack通过依赖关系图获取非代码资源比如images或字体并把他们作为依赖提供给应用程序。 3.2 entry入口 依赖关系图的开始从入口开始寻找依赖打包构建。允许多个入口 默认值是./src/index.js 例如 module.exports  {entry: index.js } 3.3 output输出 指定打包的位置和文件名。 默认主要文件是./dist/main.js 其他默认文件位置是./dist 例如 const path require(path);module.exports {entry: ./my/entry/file.js,output: {path: path.resolve(__dirname, dist),filename: my-first-webpack.bundle.js,}, }; 3.4 loader webpack默认只识别js和json文件其他类型的文件如css、ts需要安装loader处理webpack将他们转换成模块同时被添加到依赖图中。 loader属性 text - 识别出哪些文件会被转换use - 在进行转换时应该使用哪个 loader 应用通过单独定义一个module对象属性定义rules属性来配置loader的具体属性 示例 module.exports {output: {filename: my-first-webpack.bundle.js,},module: {rules: [{ test: /\.txt$/, use: raw-loader }],}, }; 3.5 plugin插件 插件是用来扩展webpack的工具正是开发者社区插件的丰富使得webpack的功能更加丰富。 通常在先require引入然后在plugins数组中定义插件。 示例 const HtmlWebpackPlugin require(html-webpack-plugin); // 通过 npm 安装module.exports {plugins: [new HtmlWebpackPlugin({ template: ./src/index.html })], }; 3.6 mode模式 webpack提供了模式的选择开发模式development、生产模式production、空模式none可通过在不同环境选择不同的配置模式让项目性能更优。 不同环境对应修改不同的配置文件例如webpack.dev.js、webpack.prod.js 示例 module.exports {mode: development, }; 3.7 resolve解析 resolve用来设置模块如何解析常用的配置有 alias配置别名简化模块引入extensions在引入模块时可不带后缀symlinks用于配置 npm link 是否生效禁用可提升编译速度 示例 const path require(path); function resolve(dir) {return path.join(__dirname, dir); }module.exports {resolve: {extensions: [.js, .jsx, .tsx, .json],alias: {: resolve(src),},symlinks: false,} }3.8 optimization优化 根据mode的不同值来自定义不同的webpack的内置优化配置一般用于生产模式提升性能。 常用的配置项有详细的可查看API minimizer配置压缩工具如 TerserPlugin、OptimizeCSSAssetsPluginsplitChunks拆分 bundleruntimeChunk是否需要将所有生成 chunk 之间共享的运行时文件拆分出来 示例 module.exports {//...optimization: {splitChunks: {// include all types of chunkschunks: all,// 重复打包问题cacheGroups:{vendors:{ //node_modules里的代码test: /[\\/]node_modules[\\/]/,chunks: all,name: vendors, //chunks namepriority: 10, //优先级enforce: true }}},runtimeChunk: {name: runtime,},}, }; 3.9 devServer 帮助我们在代码发生变化后自动编译代码具有实时重新加载功能。 常用配置项 详细的可查看API open告诉 dev-server 在服务器项目启动后打开浏览器 port本地环境的端口号 proxyAPI请求代理配置通过子属性targert设置API地址默认情况代理时会保留主机头的来源可以通过子属性changeOrigin设置为 true覆盖此行为 compress默认为true。为每个静态文件开启gzip压缩 示例 devServer: {port: 8080,open: true,overlay: {warnings: false,errors: true},proxy: {/app-config: {ws: false,target: http://xx.xx.xx.xx:8080, // 后台接口地址changeOrigin: true},} } 3.10 cache缓存 缓存生成的 webpack 模块和 chunk来改善构建速度。 他的值在开发模式下会被设置为cache: {type: memory}与cache: true作用一致 生产模式下会被禁用。  4 loader配置 项目中会使用到很多loader配置每个loader对应提供了不同的功能。例如 css-loader会对import和url()进行处理就像js解析require和import一样         babel-loader通过babel和webpack将代码转译为js代码         sass-loader将预处理器scss/sass转译成css语法代码         style-loader把css插入到dom中         html-loader将html导出为字符串在编译器需要时将压缩html字符串         ... ... 更多loader配置和使用功能可查看API 配置过程以css-loader、style-loader为例二者可串联配置 1安装loader的依赖npm install --save-dev style-loader css-loader 2修改通用环境配置文件 webpack.commom.js const paths require(./paths);module.exports {module: {rules: [{test: /\.css$/,include: paths.appSrc,use: [style-loader, // 将JS字符串生成为 style 节点css-loader, // 将CSS转化成 CommonJS 模块],},]} } 5 配置图片与字体 webpack5中可以将images图片和font字体混入到系统中。 加载图片 const paths require(./paths); module.exports {module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,include: paths.appSrc,type: asset/resource,},],}, } 加载字体 module.exports {module: {rules: [{test: /.(woff|woff2|eot|ttf|otf)$/i,include: [resolveApp(src),],type: asset/resource,},]}} 6 高级配置与性能优化 webpack可以通过一些更详细的配置来实现性能优化。例如 配置cache加快构建时间 合理拆分chunks、压缩代码等来减小打包体积 设置按需加载、浏览器缓存等加快加载速度。 具体可参考学习 Webpack5 之路优化篇