npm run build和webpack

时间: 2023-05-01 10:04:34 浏览: 115

npm run build 打包这些玩意

npm run build 打包这些玩意打包上传项目是必备的，会遇到一些问题打包前要配置的东西： config文件夹下的index.js 中的文件中的 assetsPublicPath ：…/改为./ 不然的话会是空白页， build/util.js文件下在 ‘vue-style-loader’ 之后加一行：publicPath: …/…/ 不然的话会有图片显示不出来，字体不能正常使用 vue+element-ui样式发生了变化 main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可在开发Web应用时，`npm run build` 是一个常见的命令，用于将项目打包为生产环境可用的静态资源。这个过程涉及到一系列的构建步骤，包括编译、压缩、优化等，确保应用能够在部署后正常运行。以下是一些关于 `npm run build` 的关键知识点： 1. **配置文件修改**： - **assetsPublicPath**：在`config/index.js`文件中，`assetsPublicPath` 参数定义了资源文件的相对路径。将其从 `…/` 改为 `./` 可以避免因路径问题导致的空白页面。这是因为`…/`可能会使浏览器寻找上一级目录的资源，而`./`则表示当前目录，确保资源能正确加载。 2. **样式加载器配置**： - 在 `build/util.js` 文件中，如果在 `vue-style-loader` 后添加 `publicPath: …/…/`，可以解决图片和字体资源无法正常显示的问题。这通常是由于资源路径不正确导致的，通过设置正确的公共路径，确保资源文件能够被浏览器找到。 3. **Vue + Element-UI 样式问题**： - 当 Vue 应用结合 Element-UI 使用时，有时会出现样式错乱的情况。这可能是因为引入顺序导致的。在 `main.js` 文件中，应先引入第三方库如 Element-UI 的样式，再引入自定义样式，最后引入路由配置，这样可以保证组件内的样式在第三方样式之后渲染，避免被覆盖。 4. **打包文件优化**： - 打包后的文件大小是关注的重点。`productionSourceMap` 设置为 `false` 可以禁用生产环境的源码映射文件（`.map`），减少打包输出的大小，但同时也意味着在生产环境中调试会变得困难。 - Webpack 自带的优化功能也可以利用起来，例如使用 `compression-webpack-plugin` 插件进行GZIP压缩，进一步减小文件大小。安装插件后，配置并运行 `npm run build`，可以查看打包后的效果，确认文件是否成功压缩。 5. **引入顺序**： - 除了 Element-UI 示例，其他第三方库和自定义样式的引入顺序也应引起注意。通常，基础样式和全局样式应优先引入，接着是组件库，最后是特定组件的样式。这样可以避免样式冲突，保证应用的正常显示。 6. **打包流程**： - `npm run build` 命令通常会触发一系列操作，如Babel转换ES6+代码到浏览器兼容的格式，CSS预处理器编译，图片和字体文件的处理，以及代码的分割和懒加载等。Webpack 是这个过程的核心工具，负责处理和打包各种资源。 7. **性能优化**： - 除了文件大小的考虑，还可以通过开启代码分割，利用动态导入来按需加载模块，进一步提升首屏加载速度。同时，优化图片资源，如使用SVG图标或压缩图片，也能有效减小打包文件的体积。 8. **错误和警告处理**： - 在打包过程中，可能出现的错误和警告应当及时解决，否则可能导致打包失败或应用在生产环境中运行异常。以上就是关于 `npm run build` 命令在打包Web项目时的一些关键知识点和常见问题处理。了解并掌握这些内容，有助于构建高效、稳定、优化的生产环境应用。

Q: npm run build和webpack是什么关系？ A: npm run build是运行package.json中的build命令，而webpack是一个打包工具，通常在build命令中会使用webpack来对代码进行打包和处理。因此，npm run build和webpack通常是一起使用的。

阅读全文

npm run build和webpack

相关推荐

npm.cnpm.webpack.nvm

关于vue的npm run dev和npm run build的区别介绍

解决vue项目,npm run build后,报路径错的问题

vue中Npm run build 根据环境传递参数方法来打包不同域名

基于vue-cli npm run build之后vendor.js文件过大的解决方法

frontend-webpack-build:Webpack构建仅用于前端开发

React-Starter:React + Reflux + Gulp & Webpack Build + Webpack Hot-Loading 的入门项目

详解node.js中的npm和webpack配置方法

vue填坑之webpack run build 静态资源找不到的解决方法

restaurant-page:简单的餐厅主页。 该项目的目标是熟悉npm和webpack

webpack npm的dev,run,start区别.zip

npm run dev 报错 ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in

webpack-sass-poc:使用基于 npm 的 SASS 存储库的 webpack sass 概念证明

goit-js-hw-09:介绍Node.js，NPM，Webpack

用npm安装vue和vue-cli,并使用webpack创建项目的方法

react-sass-webpack-boilerplate:使用jsx导入的sass，webpack，npm和bootstrapReact样板

webpack4.0-build-speed:webpack4.0构建速度happypack dll别名

starter-html-sass-js-webpack：这只是HTML的入门模板。 它使用webpack和npm

【java毕业设计】网页时装购物系统源码（springboot+vue+mysql+说明文档+LW）.zip

最新推荐

【java毕业设计】网页时装购物系统源码（springboot+vue+mysql+说明文档+LW）.zip

Kylin10 + GDAL2.4 + OSG3.6.4 + OsgEarth2.10.1

计算机系统维护技术.xps

数学建模问题中阻滞增长模型

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻

"互动学习：行动中的多样性与论文攻读经历"

restaurant-page:简单的餐厅主页。该项目的目标是熟悉npm和webpack

starter-html-sass-js-webpack：这只是HTML的入门模板。它使用webpack和npm