拓冰网站定制 
VuePack静态资源处理最佳实践file-loader、raw-loader 与 copy-webpack-plugin 完整方案【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepackVuePack 是一个基于 Vue 2、Vuex、Vue-router 和 Webpack 2 的现代 Vue.js 项目启动器starter其中对图片、字体等静态资源的处理方案非常值得新手参考通过 file-loader 加载图片字体、raw-loader 内联 SVG、copy-webpack-plugin 复制静态目录三者分工明确无需任何额外配置即可上手。三种静态资源加载器的分工 在 VuePack 中静态资源并不是一刀切地处理而是按文件类型分给了三个不同的 Webpack 插件工具负责的文件处理方式file-loaderico、jpg、png、gif、eot、otf、ttf、woff、woff2、webp打包后输出 URL 路径raw-loadersvg直接返回 SVG 原始文本copy-webpack-plugin./static目录内所有文件原样复制到 dist 根目录这套配置全部集中在 template/build/webpack.base.js 中官方说明文档见 docs/static-files.md。1. file-loaderimport 图片直接拿路径使用 file-loader 后你可以直接import一张图片拿到的是它打包后的访问地址import foo from ./assets/foo.png // /public-path/foo.8a3c262cfd45869e351f.png文件名中自带 8 位哈希天然具备缓存友好特性。VuePack 中的具体规则如下输出目录为static/media/{ test: /\.(ico|jpg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/, loader: file-loader, query: { name: static/media/[name].[hash:8].[ext] } } 小贴士(\?.*)?部分允许给导入语句加查询参数如?inline方便在 Webpack 3 升级后按需切换处理方式。2. raw-loader让 SVG 以内联方式使用对.svg文件VuePack 选择了 raw-loader 而非 file-loader导入后得到的是 SVG 的原始文本内容{ test: /\.svg$/, loader: raw-loader }这样做的好处是可以把 SVG 直接内联进组件中Inline SVG相比img引用内联的 SVG 可以被 CSS 直接控制颜色、大小还能做动画是社区公认的最佳 SVG 使用方式。3. copy-webpack-pluginfavicon 等不参与打包的文件像favicon.ico这类需要放在 dist 根目录、被index.html直接引用的文件不适合走打包流程。VuePack 的做法是把它们统一放进./static文件夹再用 copy-webpack-plugin 整体复制过去new CopyWebpackPlugin([ { from: _.cwd(./static), // to the root of dist path to: ./ } ])模板中默认就带了一个示例文件 template/static/favicon.ico你可以在该目录下自由添加robots.txt、manifest.json等不需要处理的文件构建后会自动出现在输出目录根部。依赖安装与版本参考三个核心依赖均已预装在模板的 template/package.json 中生成项目后无需手动安装copy-webpack-plugin: ^4.0.1, file-loader: ^0.9.0, raw-loader: ^0.5.1快速上手三步完成配置生成项目安装sao后执行sao vuepack my-project在生成的项目build/webpack.base.js中即可看到上述全部规则import 图片在组件中直接import logo from ./logo.png把变量绑定到img :srclogo放置公共文件把favicon.ico等文件放入static/目录执行npm run build后会自动复制到 dist 根目录。总结这套方案好在哪里职责清晰可打包的走 file-loader需内联的走 raw-loader不参与打包的走 copy-webpack-plugin互不干扰缓存友好文件名哈希让浏览器缓存与资源更新兼顾零配置起步所有规则写在 webpack.base.js 中并带有注释新手照着改即可扩展。更多使用细节可参考 docs/static-files.md以及项目模板说明 template/README.md。【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 VuePack静态资源处理最佳实践：file-loader、raw-loader 与 copy-webpack-plugin 完整方案
VuePack静态资源处理最佳实践file-loader、raw-loader 与 copy-webpack-plugin 完整方案【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepackVuePack 是一个基于 Vue 2、Vuex、Vue-router 和 Webpack 2 的现代 Vue.js 项目启动器starter其中对图片、字体等静态资源的处理方案非常值得新手参考通过 file-loader 加载图片字体、raw-loader 内联 SVG、copy-webpack-plugin 复制静态目录三者分工明确无需任何额外配置即可上手。三种静态资源加载器的分工 在 VuePack 中静态资源并不是一刀切地处理而是按文件类型分给了三个不同的 Webpack 插件工具负责的文件处理方式file-loaderico、jpg、png、gif、eot、otf、ttf、woff、woff2、webp打包后输出 URL 路径raw-loadersvg直接返回 SVG 原始文本copy-webpack-plugin./static目录内所有文件原样复制到 dist 根目录这套配置全部集中在 template/build/webpack.base.js 中官方说明文档见 docs/static-files.md。1. file-loaderimport 图片直接拿路径使用 file-loader 后你可以直接import一张图片拿到的是它打包后的访问地址import foo from ./assets/foo.png // /public-path/foo.8a3c262cfd45869e351f.png文件名中自带 8 位哈希天然具备缓存友好特性。VuePack 中的具体规则如下输出目录为static/media/{ test: /\.(ico|jpg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/, loader: file-loader, query: { name: static/media/[name].[hash:8].[ext] } } 小贴士(\?.*)?部分允许给导入语句加查询参数如?inline方便在 Webpack 3 升级后按需切换处理方式。2. raw-loader让 SVG 以内联方式使用对.svg文件VuePack 选择了 raw-loader 而非 file-loader导入后得到的是 SVG 的原始文本内容{ test: /\.svg$/, loader: raw-loader }这样做的好处是可以把 SVG 直接内联进组件中Inline SVG相比img引用内联的 SVG 可以被 CSS 直接控制颜色、大小还能做动画是社区公认的最佳 SVG 使用方式。3. copy-webpack-pluginfavicon 等不参与打包的文件像favicon.ico这类需要放在 dist 根目录、被index.html直接引用的文件不适合走打包流程。VuePack 的做法是把它们统一放进./static文件夹再用 copy-webpack-plugin 整体复制过去new CopyWebpackPlugin([ { from: _.cwd(./static), // to the root of dist path to: ./ } ])模板中默认就带了一个示例文件 template/static/favicon.ico你可以在该目录下自由添加robots.txt、manifest.json等不需要处理的文件构建后会自动出现在输出目录根部。依赖安装与版本参考三个核心依赖均已预装在模板的 template/package.json 中生成项目后无需手动安装copy-webpack-plugin: ^4.0.1, file-loader: ^0.9.0, raw-loader: ^0.5.1快速上手三步完成配置生成项目安装sao后执行sao vuepack my-project在生成的项目build/webpack.base.js中即可看到上述全部规则import 图片在组件中直接import logo from ./logo.png把变量绑定到img :srclogo放置公共文件把favicon.ico等文件放入static/目录执行npm run build后会自动复制到 dist 根目录。总结这套方案好在哪里职责清晰可打包的走 file-loader需内联的走 raw-loader不参与打包的走 copy-webpack-plugin互不干扰缓存友好文件名哈希让浏览器缓存与资源更新兼顾零配置起步所有规则写在 webpack.base.js 中并带有注释新手照着改即可扩展。更多使用细节可参考 docs/static-files.md以及项目模板说明 template/README.md。【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考