微信小程序开发定制公司,seo如何优化一个网站,wordpress域名变了迁移,威海做网站的目录 ResolveMode配置搭本地服务器区分环境配置 Resolve
前面学习时使用了各种各样的模块依赖#xff0c;这些模块可能来自于自己编写的代码#xff0c;也可能来自第三方库#xff0c;在 Webpack 中#xff0c;resolve 是用于解析模块依赖的配置项#xff0c;它决定了 We… 目录 ResolveMode配置搭本地服务器区分环境配置 Resolve
前面学习时使用了各种各样的模块依赖这些模块可能来自于自己编写的代码也可能来自第三方库在 Webpack 中resolve 是用于解析模块依赖的配置项它决定了 Webpack 如何找到项目中的模块文件 resolve 作用 当你在代码中 import 或 require 一个模块时、resolve 配置可以帮助 Webpack 定义如何解析这些模块路径特别是在处理文件扩展名、路径别名、模块目录等方面 webpack 使用 enhanced-resolve 来解析文件路径 解析三种文件路径 绝对路径这种情况下不需要再做进一步解析 相对路径 在这种情况下使用 import 或 require 的资源文件所处的目录被认为是上下文目录 在 import/require 中给定的相对路径会拼接此上下文路径来生成模块的绝对路径 模块路径 在 resolve.modules 中指定的所有目录检索模块默认值目录是 [node_modules]所以默认会从node_modules中查找文件 可以通过设置别名的方式来替换初始模块路径 解析引入文件和文件夹 引入文件 如果文件具有扩展名则直接打包文件 否则将使用 resolve.extensions 选项作为文件扩展名解析 引入文件夹 在文件夹中根据 resolve.mainFiles 配置选项中指定的文件顺序查找 resolve.mainFiles的默认值是 [index] 再根据 resolve.extensions 来解析扩展名 resolve 常用属性 extensions 解析到文件时自动添加扩展名告诉 Webpack 在导入语句中省略文件扩展名时它应该查找哪些扩展名 默认值是 [.wasm, .mjs, .js, .json] 如果代码中想添加加载 .vue 或者 jsx 或者 ts 等文件时必须自己写上扩展名 alias用于定义路径别名可以通过别名缩短路径可以使用 代替长路径 modules用于指定模块查找的目录默认情况下 Webpack 只会查找 node_modules 文件夹通过 modules 选项可以为 Webpack 指定其他的查找目录 mainFields告诉 Webpack 在解析模块的 package.json 时优先使用哪些字段通常用于库的 package.json 中常见的字段有 main, module 和 browser mainFiles指定文件查找时的入口文件名默认是 index symlinks控制 Webpack 是否遵循符号链接symlink默认为 true
Mode配置
前面我们学习webpack打包相关文件时有个警告我们一直没有看这就是需要配置mode接下来学习mode 在 Webpack 中mode 是一个重要的配置项用于设置构建模式。它影响 Webpack 的行为和输出决定了构建时是否开启优化如压缩代码、调试工具等
mode 有三个值 development开发模式用于开发环境提供调试支持和快速构建 特点 开启调试功能 输出的代码不会被压缩以便于调试 启用 eval 作为 devtool生成代码映射source maps方便调试源码 开启了增量编译构建速度较快 内置优化 devtool: eval (快速生成 source maps) 启用更有利于调试的错误提示 production生产模式用于生产环境进行代码压缩和各种优化生成小体积的高效代码 特点 启用各种优化功能以减少输出的文件体积和提高性能 代码会被压缩通过 TerserPlugin 自动去除未引用的代码Tree Shaking 生成优化的 source maps可选通常关闭 内置优化 TerserPlugin用于压缩 JavaScript 代码 mode: production 会自动将 devtool 设为 false取消 source map 以减少文件体积 通过 Tree Shaking 去除未引用代码 通过 DefinePlugin 将 process.env.NODE_ENV 设置为 production none无模式禁用所有内置的优化用于完全自定义配置的场景 特点 禁用所有默认优化 适用于自定义优化的场景
更多的mode配置
搭本地服务器
目前开发的代码为了运行需要有两个操作npm run build编译相关的代码通过live server或者直接通过浏览器打开index.html代码查看效果。这个操作会影响开发效率希望做到当文件发生变化时可以自动的完成编译和展示
为了完成自动编译webpack提供了几种可选的方式 webpack watch mode webpack-dev-server常用 webpack-dev-middleware
在 Webpack 中搭建本地服务器通常通过使用 webpack-dev-server 来实现。webpack-dev-server 是一个方便的开发工具它为你提供一个轻量级的 HTTP 服务器并能实时监控文件的变化自动重新加载页面 npm install webpack-dev-server -D安装 修改配置文件启动时加上serve参数 webpack-dev-server 在编译之后不会写入到任何输出文件而是将打包文件保留在内存中 事实上webpack-dev-server使用了一个库叫memfsmemory-fs webpack自己写的 都配置完可以执行npm run serve但如果你前面配置loader和plugins都是看我前面的文章练习的这时会打包成功但是访问http://localhost:8080/是空白的
配置选项说明
devServer打包后不会生成打包文件 static.directory本地服务器所提供服务的文件目录 compress是否是否为静态文件启用 gzip 压缩默认false提高页面的加载性能 host设置主机地址默认值是localhost如果希望其他地方也可以访问可以设置为 0.0.0.0 localhost 和 0.0.0.0 的区别 localhost 本质上是一个域名通常情况下会被解析成127.0.0.1 127.0.0.1 回环地址(Loop Back Address)表达的意思其实是我们主机自己发出去的包直接被自己接收 正常的数据库包经过 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层而回环地址是在网络层直接就被获取到了是不会经过数据链路层和物理层的 比如我们监听 127.0.0.1 时在同一个网段下的主机中通过ip地址是不能访问的 0.0.0.0 监听IPV4上所有的地址再根据端口找到不同的应用程序比如我们监听 0.0.0.0时在同一个网段下的主机中通过ip地址是可以访问的 port指定服务器监听的端口号例如 9000不指定默认为 8080 open启动服务器时自动打开浏览器自动导航到 localhost:port openPage自动打开配置的页面 hot开启模块热替换HMR默认已经开启实现页面的局部更新而不重新加载整个页面开启后浏览器中可以看到如下效果修改入口文件还是会全局刷新的 HMR的全称是Hot Module Replacement翻译为模块热替换它是指在应用程序运行过程中替换、添加、删除模块而无需重新刷新整个页面 HMR通过如下几种方式来提高开发的速度 不重新加载整个页面这样可以保留某些应用程序的状态不丢失 只更新需要变化的内容节省开发的时间 修改了css、js源代码会立即在浏览器更新相当于直接在浏览器的devtools中直接修改样式 如果发现当修改了某一个模块的代码时依然是刷新的整个页面这是因为需要去指定哪些模块发生更新时进行HMR在实际项目中我们不需要自己设置的 vue开发中使用vue-loader此loader支持vue组件的HMR提供开箱即用的体验 react开发中有React Hot Loader实时调整react组件目前React官方已经弃用了改成使用react-refresh historyApiFallback如果启用了 HTML5 的 History API用于单页应用需要该配置项来重定向所有 404 到首页。否则在子页面刷新时可能找不到对应资源
配置整体代码参考
const path require(path);
const { VueLoaderPlugin } require(vue-loader/dist/index);
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { DefinePlugin } require(webpack);module.exports {mode: development,entry: ./src/index.js,output: {clean: true,filename: index.js,path: path.resolve(__dirname, build),}, resolve: {alias: {components: path.resolve(__dirname, src/components),utils: path.resolve(__dirname, src/utils),},extensions: [.js, .vue, .json],},devServer: {static: {directory: path.resolve(__dirname, build), // 服务器内容的目录},compress: true, // 启用 gzip 压缩port: 9000, // 指定服务器端口号open: true, // 自动打开浏览器open: [main.html], // 自动打开浏览器并定向到http://localhost:9000/main.htmlhot: true, // 热更新historyApiFallback: true, // 支持HTML5的历史API单页应用中很有用},plugins: [new VueLoaderPlugin(),new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: haahha,template: ./public/index.html,filename: main.html,minify: {collapseWhitespace: true, // 移除空白removeComments: true, // 移除注释removeAttributeQuotes: true, // 移除属性的引号},}),new DefinePlugin({BASE_URL: ./,}),],module: {rules: [{test: /\.css$/,use: [style-loader, css-loader, postcss-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader, postcss-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset,generator: {filename: image/[name].[hash:8][ext],},parser: {dataUrlCondition: {maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件而是转base64使用},},},{test: /\.m?js$/,use: [{loader: babel-loader,options: {presets: [babel/preset-env],},},],},{test: /\.vue$/,loader: vue-loader,},],},
};区分环境配置 目前我们所有的webpack配置信息都是放到一个配置文件中的XXXX.config.js 但某些配置是在开发环境需要使用的某些配置是在生成环境需要使用的当然某些配置是在开发和生成环境都会使用的 当配置越来越多时这个文件会变得越来越不容易维护最好对配置进行划分方便我们维护和管理
如何区分不同的配置 建立config文件夹编写开发和生产配置文件 抽取公共的配置并与开发和生产配置合并 添加不同的打包脚本
// wk.comm.config.js
const path require(path);
const { VueLoaderPlugin } require(vue-loader/dist/index);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { DefinePlugin } require(webpack);module.exports {entry: ./src/index.js,output: {filename: index.js,path: path.resolve(__dirname, build),}, resolve: {alias: {components: path.resolve(__dirname, src/components),utils: path.resolve(__dirname, src/utils),},extensions: [.js, .vue, .json],},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({title: haahha,template: ./public/index.html,filename: main.html,minify: {collapseWhitespace: true, // 移除空白removeComments: true, // 移除注释removeAttributeQuotes: true, // 移除属性的引号},}),new DefinePlugin({BASE_URL: ./,}),],module: {rules: [{test: /\.css$/,use: [style-loader, css-loader, postcss-loader],},{test: /\.less$/,use: [style-loader, css-loader, less-loader, postcss-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset,generator: {filename: image/[name].[hash:8][ext],},parser: {dataUrlCondition: {maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件而是转base64使用},},},{test: /\.m?js$/,use: [{loader: babel-loader,options: {presets: [babel/preset-env],},},],},{test: /\.vue$/,loader: vue-loader,},],},
};// wk.dev.config.js
const path require(path);
const { merge } require(webpack-merge)
const commonConfig require(./wk.comm.config)module.exports merge(commonConfig, {mode: development,devServer: {static: {directory: path.resolve(__dirname, build), // 服务器内容的目录},compress: true, // 启用 gzip 压缩port: 9000, // 指定服务器端口号open: true, // 自动打开浏览器open: [main.html], // 自动打开浏览器并定向到http://localhost:9000/main.htmlhot: true, // 热更新historyApiFallback: true, // 支持HTML5的历史API单页应用中很有用},
});// wk.prod.config.js
const { merge } require(webpack-merge)
const commonConfig require(./wk.comm.config)module.exports merge(commonConfig, {mode: production,output: {clean: true,},
});
