webpack的基本使用

webpack的基本使用

经过学习,我总结了webpack的基本使用流程如下:

1.什么是webpack

概念:webpack是前端项目工程化的具体解决方案。

主要功能:他提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端Javascript的兼容性、性能优化等强大的功能。

好处:让程序猿把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性。 注意点:目前企业级的前端项目开发中,绝大多数的项目都是基于webpack进行打包构建的。

2.创建列表隔行变色项目

  • 1).新建项目空目录,并运行npm init -y命令,初始化包管理配置文件package.json

  • 2).新建src源代码目录

  • 3).新建src->index.html首页和src->index.js脚本文件

  • 4).初始化首页基本的结构

  • 5).运行npm install jquery -S命令,安装jQuery

  • 6).通过ES6模块化的方式,导入jQuery,实现列表隔行变色效果

3.由于ES6在一些浏览器中不兼容,所以我们需要用webpack进行打包。

  • 1.创建webpack.config.js文件

  • 2.文件中键入:

module.exports = {
  mode:'development' //mode用来指定构建模式,可选值有development 和production.
}
  • 3.更改package.json文件的部分代码:
 "scripts": {
        "dev": "webpack"//dev可执行脚本,名字可以自由定义。
        //指定的类型是webpack
    }
  • 4.终端命令(说明:dev是你自己定义的脚本名): npm run dev

  • 5.执行成功后,将index.html文件中的,指向生成的文件,即:dist/main.js文件。

4.mode节点的可选值:

1.development:

开放环境

不会对打包生成的文件进行代码压缩和性能优化

打包速度块,适合在开发阶段使用

2.production:

生产环境

会对打包生成的文件进行代码压缩和性能优化

打包速度很慢,仅适合在项目发布阶段使用

webpack.config.js文件的作用:

webpack.config.js是webpack的配置文件。webpack在真正开始打包构建之前,会先读取这个配置文件,从而基于给定的配置,对项目进行打包。

注意:由于webpack是基于node.js开发出来的打包工具,因此在他的配置文件中,支持使用node.js相关的语法和模块进行webpack的个性化配置。

webpack中的默认约定:

在webpack中有如下默认约定:

- 默认的打包入口文件为src→index.js

- 默认的输出文件路径为dist→main.js

注意:可以在webpack.config.js中修改打包的默认约定。

🕹️自定义打包的入口与出口

在webpack.config.js配置文件中,通过entry节点指定打包的入口。通过output节点指定打包的出口。

示例:

const path = require('path')//导入node.js中专门操作路径的模块

module.exports={
  entry: path.join(__dirname,'./src/index.js'),//打包入口文件的路径
  output:{
    path:path.join(__dirname,'./dist'),//输出文件的存放路径
    filename:'bundle.js'//输出文件的名称
    
  }
}

webpack中的插件

注意:由于每次修改index.js文件内容时,都要用npm命令重新发布,显得非常麻烦,所以需要用webpack的插件来解决这个问题。



#### 1.webpack插件的作用

  通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。最常用的webpack插件有如下两个:

  1. webpack-dev-server

    - 类似于node.js阶段用到的nodemon工具

    - 每当修改了源代码,webpack会自动进行项目的打包和构建

  1. html-webpack-plugin

    - webpack中的html插件(类似于一个模板引擎插件)

    - 可以通过此插件自定制index.html页面的内容

#### 2.webpack-dev-server

  webpack-dev-server可以让webpack监听项目源代码的变化,从而进行自动打包构建。

  #### 2.1安装webpack-dev-server

  运行如下命令,即可在插件中安装此插件:
npm install webpack-dev-server@3.11.0 -D
//其中,3.11.0为版本号,如果想换成别的版本号,官网里找就行。-D是安装在此项目中。
  #### 2.2配置webpack-dev-server

  - 修改package.js→script中的dev命令
  "scripts": {
        "dev": "webpack serve" //script节点下的脚本,可以通过npm run命令执行
         //添加server后,就可以实时更新了。
    },
  - 再次运行npm run dev命令,重新进行打包

  - 输入http://localhost:8080/ 或者点击终端生成命令中的 [http://localhost:8080/](http://localhost:8080/) ,即可在浏览器打开生成的文件,浏览效果。

  #### 2.3开启实时打包后,生成的文件将不在本地物理磁盘下,而是在内存中,所以刷新浏览器,看不到变化效果。那么,打包的文件去哪儿了呢?

    1. 不配置webpack-dev-server的情况下,webpack打包生成的文件,会存放在实际的物理磁盘下。

      - 严格遵守开发者在webpack.config.js文件中的配置

      - 根据output节点指定路径存放

    1. 配置webpack-dev-server后,实时打包生成的文件,存放在了内存之中。

      - 不在根据output指定的路径,存放在实际物理磁盘上

      - 提高了实时打包输出的性能,因为内存比物理磁盘速度块很多。

  #### 2.4生成到内存中的文件该如何访问?

  webpack-dev-server生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。

  为此,我们可以将index.html中的脚本引用,修改成根目录下的生成文件:
<script src="/fire.js">
//这里的/代表根目录,fire.js是我在webpack.config.js中指定的生成文件,可自定义。
//修改好后,在去修改文件,访问文件,浏览器中就可以实时更新了。
</script>
### 3.html-webpack-plugin插件

html-webpack-plugin插件是webpack中的html插件,可以通过此插件自定制index.html页面的内容。

需求:通过html-webpack-plugin插件,将src目录下的index.html首页,复制到根目录中一份。

  #### 3.1安装html-webpack-plugin插件
npm install html-webpack-plugin@4.5.0 -D
  #### 3.2配置html-webpack-plugin
//1.导入HTML插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//2.创建html插件的实例化对象
const htmlPlugin = new HtmlPlugin({
  template:'./src/index.html',//指定原文件的存放路径
  filename:'/index.html' //指定生成的文件存放路径
})


module.exports = ({
  mode:'development',
  plugins:[htmlPlugin]//通过plugins节点,使htmlPlugin插件生效
  
})
  #### 3.3两个注意点

  1. 通过html插件复制到项目根目录下的index.html,也被放入到了内存中。

  2. html插件在生成的index.html页面的底部,自动注入了打包的fire.js文件。

  当开启了实时打包的功能时,删除dist目录并不会造成影响,因为打包的文件是存放在内存中的,而实际物理磁盘中的dist目录,已经是旧版本的目录了。

### 4.devServer节点

在webpack.config.js配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置

示例代码如下:
//devServer节点存在于module.exports中,和mode,plugins等同级别。
devServer:{
  open:true,//初次打包完成后,自动打开浏览器
  host:'127.0.0.1',//实时打包所生成的主机地址
  port:80 //实时打包所使用的端口号
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值