webpack 4.X 基础编译
webpack4.x的打包已经不能用webpack 文件a 文件b
的方式,而是直接运行webpack --mode development
或者webpack --mode production
,这样便会默认进行打包,入口文件是'./src/index.js'
,输出路径是'./dist/main.js'
,其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。
因此我们不再按webpack 文件a 文件b
的方式运行webpack指令,而是直接运行
webpack --mode production
或者
webpack --mode development
这样便能够实现将'./src/index.js'
打包成'./dist/main.js'
。
也可以在package.json
中scripts
中加入两个成员:
"dev":"webpack --mode development", "build":"webpack --mode production"
以后我们只需要在命令行执行npm run dev
便相当于执行webpack --mode development
,执行npm run build
便相当于执行webpack --mode production
。
我们在根目录执行:
npm run dev
附:package.json:
{
"name": "StudyWebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1"
},
"devDependencies": {
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0",
"webpack-command": "^0.4.1"
}
}
总结:
1、webpack-cli必须要全局安装,否则不能使用webpack指令;
2、webpack也必须要全局安装,否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js,默认输出文件./dist/main.js。
步骤:
1、创建工程目录;
2、初始化工程目录:npm init。
3、全局安装webpack-cli。
4、全局安装webpack。
5、webpack –mode development/production进行打包,可在package.json中配置dev和build的脚本,便只需运行npm run dev/build,作用相同。
6、在webpack –mode development/production可串联设置其他参数。
webpack 4.X 基础编译的更多相关文章
- 初识webpack——webpack四个基础概念
前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...
- 【webpack 系列】基础篇
Webpack 基础篇 基本概念 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每 ...
- Makefile基础---编译
首先写一个自己的库: #include "../MyAPI.h" #include <cstdlib> #include <ctime> int getRa ...
- .16-浅析webpack源码之编译后流程梳理
这节把编译打包后的流程梳理一下,然后集中处理compile. 之前忽略了一个点,如下: new NodeEnvironmentPlugin().apply(compiler); // 引入插件加载 i ...
- 生产阶段Webpack打包【基础打包】
webpack打包 1.在根目录创建一个 webpack.config.prod.js[它其实就是在开发阶段的基础上增加点东西] 增加了 output 去除了 devServer 2.在package ...
- 略微讲讲最近的 webpack 该如何加快编译
首先假设 基础的环境是有 creat-react-app 所创建的 即所有基础的loader,插件的 cache 都已经缓存了 在这种情况下想加速,真是很难 不过,有一个插件是可以观察 各个模块所花的 ...
- webpack——bable-loader,core,preset,编译es6
//文件夹,在命令行中npm init 之后可以一直回车,答y 出现文件 然后安装bable npm install -save-dev babel-loader babel-core 文件 然后我们 ...
- webpack学习_webpack-dev-server自动编译代码
之前每次修改完之后都要执行npm run build来编译,下面有三种方式可以实现代码变化后自动编译代码,下面只重点说webpack-dev-server,其他的请看webpack开发文档 1.web ...
- Linux基础-编译安装Python
终于涉及一点儿专业的了,说实话,对于目前的我难度还是挺大的,这句话送给未来的自己 挑战开始: 首先了解一下Python3.6,底层是由c++开发的,所以在linux下需要C++的支持,必然少不了gcc ...
随机推荐
- tensorflow-用DASC结合Inception-v3对imagenet2012聚类实现
一.目的 以imagenet2012作为数据集,用Inception-v3对图像提取特征作为输入,来训练一个自编码器. 以上作为预训练模型,随后在该自编码器的基础上,中间加入一个自表示层,将最终学习到 ...
- js类型转换比较表格
JavaScript类型转换表格 值 转换为 字符串 数字 布尔值 对象 undefined "undefined" NaN false throw TypeEr ...
- python 选课系统
couser.py: import sys,osBASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))sys.pa ...
- 接口自动化框架(java)--3.get,delete请求,Excel管理多种请求类型
这套框架的报告是自己封装的 每种请求类型放入不同的sheet中,就可以避免新建太多的excel去做数据驱动. XSSFSheet类提供了一个读取sheet的方法,getSheetAt(int),通过下 ...
- 安利一个vps,7美元/年。
黑色星期五.给大家安利一个vps,7美元/年.配置如下:2 个虚拟化 CPU 2 GB (2048 MB) 专属内存 50 GB RAID-10 受保护硬盘存储 3000 GB (3TB) 月流量 1 ...
- 安装eclipse scala插件
1.安装eclipse插件,依次点击Help->Eclipse Marketplace 2.输入scala,点击go,进行搜索 3,出现了Scala IDE4.7X,点击右下方的Install进 ...
- Redishelp
/** * @author yanming.zhang * @date 2019/1/25 21:15 */ @Component public class RedisHelp { @Autowire ...
- Django框架详细介绍---cookie、session、自定义分页
1.cookie 在HTTP协议介绍中提到,该协议是无状态的,也就是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不会直接影响后面的 ...
- IT题库9-线程池的概念和原理
在什么情况下使用线程池? 1.单个任务处理的时间比较短:2.需要处理的任务的数量大: 使用线程池的好处: 1.减少在创建和销毁线程上所花的时间以及系统资源的开销.2.如不使用线程池,有可能造成系统创建 ...
- ng2
angularjs2的环境问题解决了好久. 百度到的答案也是各种各样还解决不了我的问题. 好在这几天经过不断的测试终于给解决了. ERROR in AppModule is not an NgModu ...