webpack系列之安装(Mac OS)
1. webpack介绍,可参考Webpack中文文档
2. 安装webpack之前先需要安装npm,可参看NPM的使用介绍
3. 安装webpack,可参考Webpack入门教程
===========================================================
以下我具体说一下我安装的过程,及在此过程遇到的一些问题与解决办法
1. 先确认node及npm是否安装
可以通过node --version及npm --version命令确认
如下表示node和npm已经安装了,否则会报错,node或npm命令不存在,此时先安装node或npm命令,参考文章头部给出的参考链接
2. 进入目录文件夹test,没有的话,执行mkdir test创建test文件夹(test为用来打包的项目文件夹)
3. 安装webpack
执行cnpm install webpack -g ,-g表示全局安装
以下显示表示成功安装
4. 在test目录下创建index.js文件
// index.js
console.log('Hello World!')
5. 执行webpack index.js
a. 执行此命令可能会报如下错误:
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/we...
The original webpack full-featured CLI. - webpack-command (https://github.com/webpack-co...
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):
这是告诉我们还需要安装webpack-cli,解决办法可参考安装了webpack和webpack-cli,但是运行webpack命令报错
b. 解决以上问题,执行如下命令:
先全局安装webpack和webpack-cli(全局安装webpack命令上面已经执行了 ,及cnpm install webpack- -g )
cnpm install webpack-cli -g
再局部安装webpack和webpack-cli
cnpm install webpack --save-dev(执行完此命令test目录下会生成node_modules文件夹和package.json文件)
cnpm install webpack-cli --save-dev
此时可能会报没有权限之类的错误(错误信息忘截图了。。。)
执行sudo cnpm install webpack-cli --save-dev 然后出现password,输入电脑的开机密码即可
c. 再执行webpack index.js,结果如下图,会有WARNING in configuration的一条警告
是说没有指定模式,webpack的mode有开发模式(development)和生产模式()
d. 执行webpack index.js --mode development即可
此时你就会看到test目录下会有一个dist文件夹,dist文件夹下有一个main.js文件
就说明通过webpack命令打包成功了!
原文地址:https://www.cnblogs.com/china-fanny/p/11044515.html
- Python爬虫(二十四)_selenium案例:执行javascript脚本
- Kubernetes服务网格(第10部分):服务网格API
- Python爬虫Scrapy(二)_入门案例
- python_IO编程
- Python爬虫(十七)_糗事百科案例
- 上千亿巨头撑腰 双拼妥妥被他拿了
- Python爬虫(十八)_多线程糗事百科案例
- Python爬虫(十九)_动态HTML介绍
- Python爬虫(二十)_动态爬取影评信息
- Python爬虫(二十一)_Selenium与PhantomJS
- Python爬虫(十三)_案例:使用XPath的爬虫
- Python爬虫(十四)_BeautifulSoup4 解析器
- Python爬虫(十五)_案例:使用bs4的爬虫
- Python爬虫(十六)_JSON模块与JsonPath
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法