webpack3、4的基本的使用方法
webpack的基本使用
webpack的安装
- webpack的使用时需要借助 node 的环境的
- 在 node 中自动下载了 npm 这个包管理工具,之后的操作我们需要使用npm包管理工具进行相关操作
- 我们需要打开终端(cmd)或者编译器中的终端(我使用的vs code编译器,使用
ctrl + shift + ~
打开终端) - 输入
npm install webpack -g
即可在全局下载 webpack,-g表示全局安装。 - 下载好之后在终端输入
webpack -version
即可查看webpack的版本,如果出现版本信息,则表示安装成功
注意:webpack的版本的不同在后续的操作中会存在些许差异,我这里下载的是 wepack4.x版本的,下面的讲述中我会将webpack3.x版本和4.x版本的些许差别讲一下 - 如果是webpack是4.x版本的话,除了全局安装 webpack 之外还需要全局安装一下 webpack-cli 这样后续有些问题才能进行,安装步骤如上述第四步类似
webpack的基本用法
- 假设我的目录中是这样的:src文件夹下存在入口文件main.js和js文件夹,js文件夹中还有一个aaa.js文件,各个文件的代码如下
- aaa.js
function add(num1 , num2) {
return num1 + num2;
}
function mul(num1 , num2) {
return num1 * num2;
}
export {add,mul}; // ES6导出模块
- main.js
import {add,mul} from './js/aaa.js' // ES6的语法导入模块
console.log(add(20,30));
console.log(mul(20,30));
- 了解到上述的依赖关系之后,我们便需要打包文件了。注意:webpack打包后是要在服务器上访问才能有效,不然浏览器会报错
- 确认代码中的依赖关系没错之后,在终端输入
- webpack3.x版本:
webpack .\src\main.js .\dist\bundle.js
- webpack4.x版本:
webpack .\src\main.js -o .\dist\bundle.js --mode=development
上面的代码意思为:通过webpack将.\src\main.js
该目录下的main.js文件打包到 dist文件夹下的,命名为bundle.js
- webpack3.x版本:
- 如果将来修改了代码之后,则必须重新打包一遍,即:再执行一次第三步
- 这个时候可能就会觉得该操作很繁琐,于是乎我们将进一步改进代码
- 在终端执行操作:
npm init -y
初始化一个json文件,该文件非常有必要,之后下载包都会记录在其中
注意:如果使用上面的方式初始化的json文件,则package.json的name值为项目的名称,我们不能将这里的name属性值设置为中文,所以建议使用 npm init 的方式初始化package.json文件,这样的好处是可以自定义name属性的值,不能是中文 - 在终端输入:
npm install path --save-dev
即可在开发环境下下载path的模块(方便后面使用) - 新建一个webpack.config.js文件,注意:这个文件的名称是固定的,不要自己更改,在文件中输入代码:
const path = require('path'); // 导入之前的下载好的模块
module.exports = {
// 在配置文件中,手动指定 入口 文件和 出口 文件
mode:'development', // webpack4.x版本中需要加入这个属性
entry:'./src/main.js', // 入口文件
output:{ // 出口文件
path:path.resolve(__dirname,'dist'), // 指定将要打包好的文件应该要输出到哪个地方去(注意:路径必须是绝对地址)
filename: 'bundle.js' // 指定输出文件的文件名
}
}
注意:如果在output中的path中您输入的是 ./dist 的话会报错,因为这里的path不允许使用相对地址,必须使用绝对地址,则需要借助 node 中的 path 模块
9. 做完上述操作之后,即可在终端输入:webpack
打包文件
10. 打开package.json文件,在文件中找到scripts
的属性,这里面表示脚本命令,我们在该对象中添加一个自定义的命令,如:属性名为:build,属性值为 webpack。
11. 然后我们便可以通过在终端输入:npm run build
打包文件
注意:在终端中使用的webpack是使用的全局中的 webpack,而在 scripts 对象中使用的 webpack 会优先使用本地的。我们一般使用本地的webpack,所以,我们要使用 npm 下载本地的webpack。如果是4.x版本的webpack还需要下载 webpack-cli,代码如下:
npm install webpack --save-dev
其中 save-dev 是表示开发中依赖,即:在开发中需要使用webpack,而项目上线之后不需要使用了。在 package.json 文件中的 devDependencies 中会显示你下载过的开发依赖的文件。
webpack3、4的基本的使用方法的更多相关文章
- javaSE27天复习总结
JAVA学习总结 2 第一天 2 1:计算机概述(了解) 2 (1)计算机 2 (2)计算机硬件 2 (3)计算机软件 2 (4)软件开发(理解) 2 (5) ...
- webpack3新特性介绍
6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...
- webpack3中文版使用参考文档--全面解析webpack.config.js
Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...
- Webpack打包构建太慢了?试试几个方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
- 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)
开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...
- 在webpack3里使用uglifyjs
环境:webpac<4的场景下,安装uglifyjs. cnpm install uglifyjs-webpack-plugin -D 安装完毕后,去npm里查看uglifyjs的使用方法并添加 ...
- webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包
随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...
- webpack3新特性简介
6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...
- webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)
“热更新”:对应的是 'webpack-dev-middleware' 中间件 “热加载”:对应的是 'webpack-hot-middleware' 中间件 为了使用这两个中间件,必须修改“webp ...
随机推荐
- 浑身尖刺的服务可用性守护者——hystrix熔断器实践记录
netflix公司的产品hystrix(长满刺的豪猪),在高可用目标下具有一定熔断.限流.降级的作用.这里主要写一些自己在使用时的问题解决思路,原理请自行理解,包括线程池与信号量模式等. 注意三个参数 ...
- .NET Core ORM 类库Petapoco中对分页Page添加Order By对查询的影响
最近一直在使用Petapoco+Entity Framework Core结合开发一套系统. 使用EFCore进行Code First编码,使用PMC命令生成数据库表的信息. 使用Petapoco进行 ...
- python-函数相关
一.函数: 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print(). 但你也可以自 ...
- go-数组-切片-字典
声明一个数组变量的同时为该变量赋值. ], , } 另一种便捷方法, 类型字面量中省略代表其长度的数字 , , } 对于数组来说,索引值既不能小于0也不能大于或等于数组值的长度. 索引值的最小有效值从 ...
- 为什么重写equals必须重写hoshCode的基础分析
为什么重写equals必须重写hoshCode的基础分析 1.我们先来了解下原生的equals和hashCode代码 原生equals:它判断的是两个对象是否相等 原生hashCode值:它是根据内存 ...
- ESP8266开发之旅 网络篇⑩ UDP服务
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
- webpack4+koa2+vue 实现服务器端渲染(详解)
_ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...
- dubbo初学采坑记
写在前面的话 dubbo 现在是apache组织旗下的项目,相信国内也有很多人使用.最近一个同事离职,我就接手了他的项目.远程通讯就是用的dubbo框架来实现的.使用Intelij idea 写了一个 ...
- Airflow速用
Airflow是Apache用python编写的,用到了 flask框架及相关插件,rabbitmq,celery等(windows不兼容):. 主要实现的功能 编写 定时任务,及任务间的编排: 提供 ...
- WordCount的实现和测试
WordCount 一.开头 (1)合作者:201631107110,201631083416 (2)代码地址:https://gitee.com/zhaoxiaoqin/WordCount.git ...