当前位置: 首页 > news >正文

vue3 webpack打包流程及安装 (1)

 npm run build 也可以打包 如果没有特殊需求 可以使用 效果其实是差不多的

---------------------------------------------------------------------------------------------------------------------------------

webpack网址 : 起步 | webpack 中文文档 (docschina.org)

报错    跟着安装报错  后来查了才知道  是因为 webpack 版本有问题 安装的时候看好

webpack的版本过高  产生的错误 需要卸掉从新安装webpack -v  查看 版本号

--------------------------------------------------------------------------------------------------------------------------- 

正式开始

第一步,开始复杂的安装过程

安装   安装报错的话可以把后边的  --save-dev  删掉npm install webpack webpack-cli --save-devnpm install css-loader style-loader –save-devnpm install file-loader –save-devnpm install html-webpack-plugin --save-dev在黑窗口中执行 命令,查看webapck版本
npm webpack -v卸载
删除局部webpack-cli
npm uninstall webpack-cli
删除全局webpack
npm uninstall -g webpack
删除本地wbpack
npm uninstall webpack

第二步 。需要单独创建 webpack.config.js 在文件进行配置打包的东西

const path = require('path');module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]
}};

第三步 ,如果是统一文件入口  那就需要创建一个 js文件   例如  index.js文件存放代码 把要打包的都引进来 

无论是css  js  还是html都得是单独的文件  不然 无法进行打包

js 

css

第四步 。使用打包指令 webapck -w 可以进行随时随地打包  不需要每次都进行 单独打包 你每次保存 下边都会有变化 就是正常运行了  

在dist查看打包的数据 

参考: 

Webpack的使用方法_webpack 命令_ID月光倾城的博客-CSDN博客

webpack打包全流程_webpack打包的整个过程_理想今年妳几岁的博客-CSDN博客

http://www.lryc.cn/news/157944.html

相关文章:

  • 【C++】内联函数 ① ( 内联函数引入 | 内联函数语法 )
  • 聊聊springboot的ConfigurationProperties的绑定
  • Mysql和Oracle的语法区别?
  • F - LIS on Tree
  • 2023 年全国大学生数学建模B题目-多波束测线问题
  • qt creater11 翻译国际化教程教程:
  • 【AWS实验 】在 AWS Fargate 上使用 Amazon ECS 部署应用程序
  • matlab几种求解器的选择fsolve-sole-vpasolve
  • 无限访问 GPT-4,OpenAI 强势推出 ChatGPT 企业版!
  • MySQL的故事——Schema与数据类型优化
  • C++编译和链接
  • 【CSDN技术】Markdown编辑器如何使用-csdn博客编写入门
  • 【docker】运行redis
  • Paddle训练COCO-stuff数据集学习记录
  • SpringBoot 框架学习
  • java - lua - redis 完成商品库存的删减
  • dbeaver离线安装clickhouse连接驱动
  • 2024腾讯校招后端面试真题汇总及其解答(二)
  • datagrip 相关数据连接信息无缝迁移
  • 不就是G2O嘛
  • C#开发的OpenRA游戏之系统参数选项按钮
  • 苹果启动2024年SRDP计划:邀请安全专家使用定制iPhone寻找漏洞
  • std::make_shared和new初始化智能指针的区别
  • 无涯教程-JavaScript - ERFC.PRECISE函数
  • 2023国赛数学建模C题思路分析 - 蔬菜类商品的自动定价与补货决策
  • 手写Spring:第1章-开篇介绍,手写Spring
  • C语言中,字节对齐是一种重要的内存管理概念
  • 网络丢包问题,敢不敢这样定位?
  • 【漏洞复现】H3C路由器信息泄露任意用户登录
  • 随机数算法,SQL