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.jsonscripts中加入两个成员:

"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 基础编译的更多相关文章

  1. 初识webpack——webpack四个基础概念

    前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...

  2. 【webpack 系列】基础篇

    Webpack 基础篇 基本概念 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每 ...

  3. Makefile基础---编译

    首先写一个自己的库: #include "../MyAPI.h" #include <cstdlib> #include <ctime> int getRa ...

  4. .16-浅析webpack源码之编译后流程梳理

    这节把编译打包后的流程梳理一下,然后集中处理compile. 之前忽略了一个点,如下: new NodeEnvironmentPlugin().apply(compiler); // 引入插件加载 i ...

  5. 生产阶段Webpack打包【基础打包】

    webpack打包 1.在根目录创建一个 webpack.config.prod.js[它其实就是在开发阶段的基础上增加点东西] 增加了 output 去除了 devServer 2.在package ...

  6. 略微讲讲最近的 webpack 该如何加快编译

    首先假设 基础的环境是有 creat-react-app 所创建的 即所有基础的loader,插件的 cache 都已经缓存了 在这种情况下想加速,真是很难 不过,有一个插件是可以观察 各个模块所花的 ...

  7. webpack——bable-loader,core,preset,编译es6

    //文件夹,在命令行中npm init 之后可以一直回车,答y 出现文件 然后安装bable npm install -save-dev babel-loader babel-core 文件 然后我们 ...

  8. webpack学习_webpack-dev-server自动编译代码

    之前每次修改完之后都要执行npm run build来编译,下面有三种方式可以实现代码变化后自动编译代码,下面只重点说webpack-dev-server,其他的请看webpack开发文档 1.web ...

  9. Linux基础-编译安装Python

    终于涉及一点儿专业的了,说实话,对于目前的我难度还是挺大的,这句话送给未来的自己 挑战开始: 首先了解一下Python3.6,底层是由c++开发的,所以在linux下需要C++的支持,必然少不了gcc ...

随机推荐

  1. 面向移动设备的html5开发框架

    很久以前整理了篇将手机网站做成手机应用的JS框架.时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的. 1.jQuery Mobile jQuery Mobile ...

  2. Maven-007-Nexus 用户添加,用户角色分配,用户修改密码,管理员重置用户密码

    配置好 maven nexus 私服后,默认的用户可通过查看[Users]查看当前私服中所存在的用户,如下图所示:

  3. jQuery的查找

    children([expr])概述 :取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合.可以通过可选的表达式来过滤所匹配的子元素.注意:parents()将查找所有祖辈元素,而child ...

  4. Ubuntu查看磁盘空间命令(转载)

    linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命令格式: df [选项] [文件] 2.命 ...

  5. UML——综合实例

  6. C++学习之嵌套类和局部类

    C++学习之嵌套类和局部类 局部类 在一个函数体内定义的类称为局部类. 局部类中只能使用它的外围作用域中的对象和函数进行联系,因为外围作用域中的变量与该局部类的对象无关.在定义局部类时需要注意:局部类 ...

  7. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 吾八哥学Python(二):Python代码编辑器的选用

    Python开发环境配置好了,但发现自带的代码编辑器貌似用着有点不大习惯啊,所以咱们就找一个"好用的"代码编辑器吧,网上搜了一下资料,Python常用的编辑器有如下一些: 1. S ...

  9. vue框架中的日期组件转换为yyy-mm-dd格式

    最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

  10. cf219d 基础换根法

    /*树形dp换根法*/ #include<bits/stdc++.h> using namespace std; #define maxn 200005 ]; int root,n,s,t ...