VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • webpack初识(webpack是什么?webpack有哪些功能?)

webpack简介

webpack是基于模块化的打包(构建)工具,它把一切视为模块(js、css、图片)

它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(语法转换、资源压缩、模块合并),最终生成运行时态的文件。

 

webpack的作用

  • 代码转换:将TypeScript编译成Javascript,将SCSS编译成CSS等。
  • 文件优化:压缩Javascript、CSS、HTML代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码,提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要通过构建功能将模块分类合并成一个文件。
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
  • 自动发布:更新代码后,自动构建出线上发布代码并传输给发布系统。

 

webpack的安装

webpack通过npm安装,它提供了两个包:

  • webpack:核心包,包含了webpack构建过程中要用到的所有api
  • webpack-cli:提供一个简单的cli命令,它调用了webpack核心包的api,来完成构建过程

安装方式:

  • 全局安装:可以全局使用webpack命令,但是无法为不同项目对应不同的webpack版本(npm install -g)
  • 本地安装:推荐,每个项目都使用自己的webpack版本进行构建(npm install -D)

webpack使用

全局的webpack:

webpack

本地的webpack:

npx webpack

默认情况下,webpack会以./src/index.js作为入口文件分析依赖关系,打包到./dist/main.js文件中

通过--mode选项可以控制webpack的打包结果的运行环境

 

区分环境

有些时候,我们需要针对生产环境和开发环境分别书写webpack配置

为了更好的适应这种要求,webpack允许配置不仅可以是一个对象,还可以是一个函数

npx webpack --env.prod

复制代码
// webpack.config.js
module.exports = env => {
    if(env && env.prod) {
      return {
        mode: 'production',
        devtool: 'none'
      }
    }else {
      return {
        mode: 'development',
        devtool: 'source-map'
      }
    }
}
复制代码

这样一来,我们就可以在命令中指定环境,在代码中进行判断,根据环境返回不同的配置结果。

 来源:https://www.cnblogs.com/zhengrongbaba/p/15102278.html


相关教程