webpack使用快捷方式进行编译

最新推荐文章于 2022-10-02 08:31:48 发布
最新推荐文章于 2022-10-02 08:31:48 发布
阅读量270 收藏
点赞数
文章标签： webpack快捷编译打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyp_slw/article/details/89046949
版权

1.在package.json中的scripts中添加:“build”:“webpack”

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

2.可以通过 npm run 查看你的配置里面都有哪些命令

3.然后这时就可以使用 npm run build进行打包 比刚才简单的多

lar_slw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你要知道的 Npm Script 都在这里
Beidan_ever的博客
05-16 1579
在拿到一个项目之后，如何看入口文件，如何运行项目，我们都会找到 package.json 中的 script 。 甚至在做项目做久之后，我们会自己写一些脚本来给开发提效，但你知道 NPM 脚本能做什么吗？ 你知道如何传递一个参数给脚本？ 你知道如何执行某个脚本文件么？ 在这篇文章中，我将分享我如何充分利用 NPM 脚本。 ## 介绍 NPM 脚本是 package.json 中定义的一组内置脚本和自定义脚本。他们的目标是提供一种简单的方法来执行重复的任务，比如： - 启动项目 - 打包项目 - 执行单元
NPM详解
qq_43742385的博客
07-02 8405
NPM详解介绍命令执行多个脚本pre & post错误静默消息日志等级从文件中引用路径访问环境变量传递参数命名规则前缀 在拿到一个项目之后，如何看入口文件，如何运行项目，我们都会找到 package.json 中的 script 。 甚至在做项目做久之后，我们会自己写一些脚本来给开发提效，但你知道 NPM 脚本能做什么吗？ 你知道如何传递一个参数给脚本？ 你知道如何执行某个脚本文件么？ 在这篇文章中，我将分享我如何充分利用 NPM 脚本。 介绍 NPM 脚本是 package.json 中定义的一组
一杯茶的时间，上手 Express 框架开发
图雀社区
12-18 5124
Node.js 已经成为 Web 后台开发圈一股不容忽视的力量，凭借其良好的异步性能、丰富的 npm 库以及 JavaScript 语言方面的优势，已经成为了很多大公司开发其后台架构的重要技术之一，而 Express 框架则是其中知名度最高、也是最受欢迎的后端开发框架。在这篇教程中，你将了解 Express 在 Node 内置 http 模块的基础上做了怎样的封装，并掌握路由和中间件这两个关键概念...
（VueJS）Webpack
黑胡子大叔的博客
03-12 223
什么是Webpack Webpack是一个Js的静态模块打包工具 模块 \ 模块化： 前端模块化方案：AMD、CMD、CommonJS、ES6 和grunt \ gulp的对比： grunt \ gulp的核心是Task； 配置一系列的task，并且定义task要处理的事物（例如ES6、ts转化、图片压缩、scss转成css） 之后让grunt \ gulp来一次执行这些task，并且让...
前端Jest测试工具使用
铭小小
06-01 1820
参考官方文档使用：https://jestjs.io/docs/zh-Hans/getting-started.html 首先来一个简单的例子 使用npm和yarn工具安装都是可以的 npm install jest -g 安装jest后就可以进行测试了，测试步骤如下 1.在终端npm init一个文件夹 2.创建被测试的js文件，里面写一个函数，使用common.js或者AMD导出...
webpack-practice
04-25
6. **别名配置（Aliases）**: 通过设置别名，我们可以为模块路径创建快捷方式，使代码更易读，也便于重构。例如，将所有组件目录设置为`@components`。 7. **externals 配置**: 对于第三方库，有时我们会选择将其...
create-react-app：基于Webpack自定义React脚手架
02-06
在`create-react-app`中，Webpack配置已经为你做好，但如果你想进行更深入的定制，可以通过`eject`操作来暴露这些配置。不过，这通常不推荐，因为`eject`后的配置难以维护和升级。 **Webpack Dev Server** 在开发...
typescript-lambda-bundle:使用webpack打包的TypeScript Lambda示例
04-09
传统上，Webpack用于前端应用程序中，以将JavaScript，HTML，CSS以及供应商的依赖项组织到足够紧凑的javascript捆绑包中，以便浏览器可以对其进行解压缩并以有效的方式对其进行解析。 我们正在利用ts-loader ...
webgltemplate:使用 THREE.js 和 webpack 轻松开发 webgl 的模板
06-09
【标题】：“webgltemplate”是一个基于THREE.js和webpack的WebGL开发模板，它为JavaScript程序员提供了一个方便快捷的框架来构建3D图形应用程序。 【描述】：这个项目是为那些想要使用WebGL技术，特别是THREE.js库...
前端开源库-gemstone-config-webpack
08-29
在实际使用`gemstone-config-webpack`时，开发者可以根据自身项目需求进行微调或扩展。例如，如果项目需要支持TypeScript，可以添加相应的TypeScript加载器和配置；如果需要处理SVG，可以添加处理SVG的加载器。`...
tsc-multi：将多个TypeScript项目编译为多个目标
02-09
tsc-multi 将多个TypeScript项目编译为多个目标。 安装 npm install tsc-multi --save-dev 用法 在文件夹中创建一个tsc-multi.json 。 { " targets " : [ { " extname " : " .cjs " , " module " : " commonjs " }, { " extname " : " .mjs " , " module " : " esnext " } ], " projects " : [ " packages/*/tsconfig.json " ] } 生成TypeScript文件。 tsc-multi 观察更改并重建TypeScript文件。 tsc-multi --watch 删除内置文件。 tsc-multi --clean 组态 targe
TypeScript 工程化的实践方案
weixin_50216991的博客
10-02 724
上一篇系统地总结学习了TypeScript的基础常用语法。但我们学习 TypeScript 的目的不是为了造一间“小茅屋”，而是为了造“高楼大厦”，这也正是 TypeScript 的类型系统带来的优势。这一篇博客会学习**TypeScript 工程化**的一些知识点，具体内容包括：tsc编译选项、tsconfig.json的配置、webpack打包ts代码。
ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in 'F:\demo\t
热门推荐
LPLIFE的博客
06-11 2万+
解决这个问题请跳到第六步 下面是比较完整的简单打包： 一.确保已经安装了nodeJS之后. 二. 创建webpack-demo,我的是f盘下的, 2.然后进入这个文件夹: 3.进行初始化,一路都是选择默认(回车就可以): 查看初始化后的文件夹,里面只有一个json文件: 4. 接下来装webpack npm install webpack --save-dev ...
4W字从0到部署上线，用 TS 带你彻底掌握前端工程化
前端达人
09-06 713
作者：前端公虾米 公号 / 子弈前言本文是算法与 TypeScript 实现中 TypeScript 项目整体的环境配置过程介绍。主要包括了以下一些配置内容：Git Commit Mes...
vite vue3 TypeScript 项目工程化配置
前端开发者
09-24 5724
vite vue3 TypeScript 项目工程化配置 1.ESLint 安装 ESLint ESLint 文档 yarn add eslint -D 初始化 ESLint npx eslint --init 以下选择仅供参考 √ How would you like to use ESLint? · style √ What type of modules does your project use? · none √ Which framework does your project use?
java 编译快捷键_Eclipse编译快捷键
weixin_39730263的博客
02-12 1092
从C#转学Java，总结了一些Eclipse跟Microsoft Visual Studio 向对应的快捷键：1. Run Ctrl+F11 (VS对应的是F5)2. Debug F11 (VS对应的是 ：F10)3. 设置/去除断点 Ctrl+Shift+B (VS： F9)4. 逐步执行F6 (VS: F10)5. 进入函数执行F5 (VS： F11)6. 中断执行 Ctrl+F2...
一篇文章读懂webpack如何打包
朝花夕拾的博客
11-21 6138
webpack是打包命令。如果我们不指定它的后继参数，其实也能实现打包。但是有一些小的限制。 webpack如果不指定输入和输出，那么默认的打包文件就是./src/index,默认的输出路径是./dist/index.js 第一种是通过build，有点长。另外一个是通过webpack配置文件，这两个没有太大的区别，干的都是同一件事情，只是用了不同的方法。 如果用第一种方法，在build中，需要写配置节，给全参数。 打包命令的表达式：webpack源文件路径-o输出文件路径--（模式） ...
建立一个typescript工程
wulong710的专栏
11-30 3084
建立一个typescript工程，不要太复杂。 1.安装node.js 自己下载安装 2.打开命令行运行 $ node -v v8.12.0 $ npm install npm -g $ npm -v 6.4.1 andrew@DESKTOP-1CLR4DJ /cygdrive/e/study/ts/test_four $ npm -g install typescript $...
TypeScript自学课(5)-使用TSC编译TS
发果叁
06-16 2779
在上一章中，我们介绍了TSC工作，但是并没有完整的走完一个使用流程，本文，我们通过一个add函数来学习编写TS代码的流程。在编码之前，是需要配置好TSC的配置文件,执行 初始化项目,自动生成文件，并默认配置项。对于一个前端项目，肯定是分文件夹的。例如：我们的代码可能是放在src下面，如果有使用npm拉取使用第三方包，会生成文件夹。src我们是需要编译的，但是是不需要编译的，我们就需要将排除掉，就像是webpack打包也会配置排除TSC提供了和来配置编译和忽略文件。 启动监听，不打包 此时你会在控制台发现，
vue.config.js配置webpack对md文件进行编译并使用
最新发布
05-05
如果你想在 Vue 项目中使用 Markdown 文件，可以使用 `vue-loader` 和 `markdown-loader` 来编译 Markdown 文件。下面是具体的配置步骤： 1. 安装 `markdown-loader` 和 `html-webpack-plugin`（可选）： ```bash npm install --save-dev markdown-loader html-webpack-plugin ``` 2. 在 `vue.config.js` 中添加如下配置： ```js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { chainWebpack: config => { // Markdown Loader config.module .rule('md') .test(/\.md$/) .use('html-loader') .loader('html-loader') .end() .use('markdown-loader') .loader('markdown-loader') .end(); // HTML Plugin config.plugin('html') .tap(args => { args[0].template = './src/index.html'; return args; }); } }; ``` 这里使用了 `chainWebpack` 配置函数，它允许你在内部修改 webpack 配置。具体地，我们添加了一个 `md` 规则，用于匹配 Markdown 文件，并使用 `html-loader` 和 `markdown-loader` 来编译 Markdown 文件。同时，我们还添加了一个 `html` 插件，用于指定 HTML 模板文件。 3. 在组件中导入 Markdown 文件： ```vue <template> <div v-html="markdown"></div> </template> <script> import myMarkdown from './myMarkdown.md'; export default { data() { return { markdown: myMarkdown }; } }; </script> ``` 在组件中使用 `v-html` 指令来将 Markdown 文本渲染成 HTML。同时，我们通过 `import` 语句将 Markdown 文件导入到组件中，并将其存储在组件的 `data` 中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lar_slw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值