webpack的基本使用


webpack的安装

  1. webpack的使用时需要借助 node 的环境的
  2. 在 node 中自动下载了 npm 这个包管理工具,之后的操作我们需要使用npm包管理工具进行相关操作
  3. 我们需要打开终端(cmd)或者编译器中的终端(我使用的vs code编译器,使用 ctrl + shift + ~ 打开终端)
  4. 输入 npm install webpack -g 即可在全局下载 webpack,-g表示全局安装。
  5. 下载好之后在终端输入 webpack -version 即可查看webpack的版本,如果出现版本信息,则表示安装成功

    注意:webpack的版本的不同在后续的操作中会存在些许差异,我这里下载的是 wepack4.x版本的,下面的讲述中我会将webpack3.x版本和4.x版本的些许差别讲一下
  6. 如果是webpack是4.x版本的话,除了全局安装 webpack 之外还需要全局安装一下 webpack-cli 这样后续有些问题才能进行,安装步骤如上述第四步类似

webpack的基本用法

  1. 假设我的目录中是这样的: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));
  1. 了解到上述的依赖关系之后,我们便需要打包文件了。注意:webpack打包后是要在服务器上访问才能有效,不然浏览器会报错
  2. 确认代码中的依赖关系没错之后,在终端输入
    • 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
  3. 如果将来修改了代码之后,则必须重新打包一遍,即:再执行一次第三步
  4. 这个时候可能就会觉得该操作很繁琐,于是乎我们将进一步改进代码
  5. 在终端执行操作:npm init -y 初始化一个json文件,该文件非常有必要,之后下载包都会记录在其中

    注意:如果使用上面的方式初始化的json文件,则package.json的name值为项目的名称,我们不能将这里的name属性值设置为中文,所以建议使用 npm init 的方式初始化package.json文件,这样的好处是可以自定义name属性的值,不能是中文
  6. 在终端输入:npm install path --save-dev即可在开发环境下下载path的模块(方便后面使用)
  7. 新建一个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的基本的使用方法的更多相关文章

  1. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  2. webpack3新特性介绍

    6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...

  3. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

  4. Webpack打包构建太慢了?试试几个方法

    Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...

  5. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  6. 在webpack3里使用uglifyjs

    环境:webpac<4的场景下,安装uglifyjs. cnpm install uglifyjs-webpack-plugin -D 安装完毕后,去npm里查看uglifyjs的使用方法并添加 ...

  7. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  8. webpack3新特性简介

    6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...

  9. webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)

    “热更新”:对应的是 'webpack-dev-middleware' 中间件 “热加载”:对应的是 'webpack-hot-middleware' 中间件 为了使用这两个中间件,必须修改“webp ...

随机推荐

  1. 浑身尖刺的服务可用性守护者——hystrix熔断器实践记录

    netflix公司的产品hystrix(长满刺的豪猪),在高可用目标下具有一定熔断.限流.降级的作用.这里主要写一些自己在使用时的问题解决思路,原理请自行理解,包括线程池与信号量模式等. 注意三个参数 ...

  2. .NET Core ORM 类库Petapoco中对分页Page添加Order By对查询的影响

    最近一直在使用Petapoco+Entity Framework Core结合开发一套系统. 使用EFCore进行Code First编码,使用PMC命令生成数据库表的信息. 使用Petapoco进行 ...

  3. python-函数相关

    一.函数: 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print(). 但你也可以自 ...

  4. go-数组-切片-字典

    声明一个数组变量的同时为该变量赋值. ], , } 另一种便捷方法, 类型字面量中省略代表其长度的数字 , , } 对于数组来说,索引值既不能小于0也不能大于或等于数组值的长度. 索引值的最小有效值从 ...

  5. 为什么重写equals必须重写hoshCode的基础分析

    为什么重写equals必须重写hoshCode的基础分析 1.我们先来了解下原生的equals和hashCode代码 原生equals:它判断的是两个对象是否相等 原生hashCode值:它是根据内存 ...

  6. ESP8266开发之旅 网络篇⑩ UDP服务

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  7. webpack4+koa2+vue 实现服务器端渲染(详解)

    _ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...

  8. dubbo初学采坑记

    写在前面的话 dubbo 现在是apache组织旗下的项目,相信国内也有很多人使用.最近一个同事离职,我就接手了他的项目.远程通讯就是用的dubbo框架来实现的.使用Intelij idea 写了一个 ...

  9. Airflow速用

    Airflow是Apache用python编写的,用到了 flask框架及相关插件,rabbitmq,celery等(windows不兼容):. 主要实现的功能 编写 定时任务,及任务间的编排: 提供 ...

  10. WordCount的实现和测试

    WordCount 一.开头 (1)合作者:201631107110,201631083416 (2)代码地址:https://gitee.com/zhaoxiaoqin/WordCount.git ...