分享好友 前端技术首页 频道列表

webpack命令局部运行的几种方法 webpack用法

webpack  2023-03-08 19:470
webpack命令局部运行的几种方法
 
1. 第一种,先全局安装webpack
命令:npm install -g webpack
然后再在项目内安装
命令:npm install webpack --save-dev
这样在项目内就可以直接使用webpack命令了,运行的却是局部的webpack
 
2.第二种,直接在局部安装webpack,利用package.json设置中的scripts属性
命令: npm install webpack --sava-dev / yarn add webapck
如果只是单纯的在局部安装webpack,你在cli(命令行界面)里输入webpack你会发现webpack : command not found,该命令不存在,具体原因暂时讲不清楚,以后研究研究再来补充。
我们可以利用package.json配置中的scripts属性来运行webpack命令,使用方法如下:
"scripts": {
"test": "webpack-dev-server --inline"
}
如此设置,然后在cli里利用npm run test,这样就相当于执行了webpack-dev-server --inline命令了。
 
3.第三种,node_modules/.bin/webpack
这个方法和第二种方法一样,都是只在局部安装webpack,但是不需要利用package.json的scripts属性。
项目内安装完webpack以后,直接在cli里输入node_modules/.bin/webpack即可以达到运行webpack命令的效果。去.bin目录下看看可以发现里面有webpack相关的几个文件,通过该命令,我们也可以大概知道这个命令是到.bin目录下去找到webpack,我一开始是这样理解的,所以我觉得既然可以这样运行,为什么不可以直接cd 到 .bin目录内去直接执行webpack命令呢?我尝试了下,很遗憾,还是提示webpack : command not found,所以我还是有点困惑,希望有大神可以解答一下~
 
4.新建一个index.js,内容如下:
const webpack = require('webpack');
webpack();
 
然后在cli里运行 node index.js即可
 
5.其他
除了上面这四种方法,应该还有其他方法,比如我了解的利用package.json的Bin属性等,但具体情况我还没尝试,等后续尝试了再来补充。
 
有理解错误的地方还望老司机指出,我会及时改正,以免误导大家,谢谢~。
 

查看更多关于【webpack】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
扩大编译内存 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
 verbose stack Error: choreographer@1.0.0 rundev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`扩大编译内存 地址  D:\park\node_modules\.bin\webpack-dev-server.cmd@ECHO offSETLOCALCALL :find_dp0IF EXIST "%dp0

0评论2023-03-08496

html-webpack-plugin不输出script标签的方法 htmlwebpackplugin chunks
约550行:if (!this.options.disableScript) {if (this.options.inject === 'head') {head = head.concat(scripts);} else {body = body.concat(scripts);}}然后这样使用:new HtmlWebpackPlugin({disableScript: true,//...})

0评论2023-03-08586

gulp与webpack-stream集成配置 grunt gulp webpack区别
webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack1.安装webpack-stream很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但webpack-s

0评论2023-03-08858

【Vue】WebPack 忽略指定文件或目录
前端Vue项目使用 WebPack 打包时,有时候我们需要忽略掉一些文件。比如一些说明文档、ReadMe之类的,我们只希望它存在于源码中,而不是被打包给用户。通过修改 webpack.base.conf.js 配置文件,有以下方式可以达到目的。方法1:使用 null-loadermodule: {rule

0评论2023-03-08539

Karma 4 - Karma 集成 Webpack 进行单元测试
 可以将 karma 与 webpack 结合起来,自动化整个单元测试过程。1. 首先根据 1 完成基本的 karma 测试环境。2. 安装 webpack 和 webpack 使用的 loader在最简单的情况下,我们只需要 webpack 和 webpack 的 karma 插件 karma-webpacknpm i -D webpack karma-w

0评论2023-03-08430

webpack的实现机制

0评论2023-03-08425

转-webpack学习笔记--整体配置结构 webpack的配置哪些参数
前端学习一段时间后,尤其是工作2-3年的小伙伴们在面试中都会害怕被问到webpack,我也害怕,每次都是临时抱佛脚,虽然自己会简单的配置webpack但是对webpack的原理还是一知半解,无意中看到这篇文章写的还不错,所以转发过来,也方便自己学习和记录。const pat

0评论2023-03-08550

webpack之tapable
tapablewebpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是tapable,核心原理是依赖于发布订阅模式;tapable注册函数的方法有三种:tap、tapAsync、tapPromise相对应的执行方法也有三种:call、callAsync、promise

0评论2023-03-08509

vscode配置webpack alias支持
安装node modules resolve插件添加jsconfig配置https://code.visualstudio.com/docs/languages/jsconfig{"compilerOptions": {"target": "es2017","allowSyntheticDefaultImports": false,"baseUrl": "./","paths&

0评论2023-03-08374

Webpack 傻瓜式指南(一)
modules with dependencies   webpack   module bundler   static  assetss   .js .js .png Webpack傻瓜式指南npm install -g webpack定义   MODULE BUNDLER 把有依赖关系的各种文件打包成一系列的静态资源简单来说就是一个配置文件, 在这一个文件中

0评论2023-03-08900

Webpack
Webpack 是加强版Browserify大型单页应用React Webpack 专家用户所有的静态文件jade   png  所有静态模块认为是module  .js  .pngcode splitting   loadercode splitting 可以自动完成, 不需要手动处理loader 处理各种类型的静态文件, 并且支持串联

0评论2023-03-08606

webpack(5)配置打包less和sass webpack打包lib
1.打包less需要下载包less和less-loader:npm install less less-loader -D2.打包sass需要下载包node-sass和sass-loader:npm install node-sass sass-loader -D3.在(4)的基础上新增一个index.less文件:@width:200px;@height:200px;@color:green;#box1{

0评论2023-03-08651

更多推荐