初识webpack

本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。

在开始前,需要先了解webpack中的四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)

  • entry:应该使用哪个(哪些)模块来作为构建其内部依赖图的开始。
  • output:输出所创建的bundles,以及这些文件的命名。
  • loader:将所有类型的文件转换为webpack能够处理的有效模块。
  • plugins:打包优化、压缩、重新定义环境中的变量等。

entry points

标准用法:entry: { [entryChunkName: string]: string | Array<string> }

entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js',
}

output

output选项可以控制webpack如何向硬盘写入编译文件。

output的值是一个对象,包括filenamepathfilename输出文件的文件名,path为输出目录的绝对路径。

output: {
  filename: 'bundle.js',
  path: '/home/project/public/assets',
}

此配置将一个bundle.js文件输出到/home/project/public/assets目录中。

loader

loader用于对模块的源代码进行转换。

使用loader加载CSS文件:

npm install --save-dev css-loader

将Typescript转换为JavaScript:

npm install --save-dev ts-loader

在配置文件中进行配置:

// webpack.config.js
module: {
  rules: [
    { test: /\.css$/, use: 'css-loader' },
    { test: /\.ts$/, use: 'ts-loader' },
  ]
}

在webpack配置中也支持一种文件引入多个loader:

// webpack.config.js
module: {
  rules: [
    { test: /\.css$/, 
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' }
        }
      ] 
    }
  ]
}

插件

由于插件可以携带参数/选项,所以在webpack配置中,向plugins传入new实例。

// webpack.config.js
const webpack = require('webpack');

const cnfig = {
  plugins: [
    new webpack.BannerPlugin('版权所有,翻版必究')
  ]
}

模块热替换HMR

模块热替换功能会在应用程序中替换、添加或删除模块,而无需加载整个页面。主要通过以下方式来显著加快开发速度:

  • 保留在完全重新加载页面时丢失的应用程序状态。
  • 只更新变更内容,以节省宝贵的开发时间。
  • 调整样式更加快速,几乎相当于在浏览器调试器中更改样式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Redux快速上手

    在创建一个Store时可以添加中间件,如redux-thunk用于异步获取数据,redux-devtools-extension浏览器调试工具等。

    不作声
  • 628笔试题

    第一次输出[9,2,3] [9,2,3],第二次输出[4,5,6] [9,2,3]

    不作声
  • CSP

    该评论被提交后,会存储在数据库中,当其他用户打开该页面时,该代码会被自动执行,用户就会被攻击到。

    不作声
  • 你可能不知道的9条Webpack优化策略

    本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积,学会分析打包的瓶颈以...

    前端森林
  • Spring Cloud 微服务(六):UAA 安装部署

    点击 apache-tomcat-9.0.37.zip 下载 Tomcat。解压后修改脚本执行权限:

    安宁
  • 快速学习Maven-Nexus把第三方jar包放入本地仓库或私服

    需要在 maven 软件的核心配置文件 settings.xml 中配置第三方仓库的 server 信息

    cwl_java
  • 如何使用Passenger和Nginx部署Rails

    如果您是Ruby on Rails开发人员,可能需要Web服务器来托管您的Web应用程序。本教程将向您展示如何使用Phusion Passenger。作为Rai...

    乌鸦
  • 为什么SpringBoot的 jar 可以直接运行?

    SpringBoot提供了一个插件spring-boot-maven-plugin用于把程序打包成一个可执行的jar包。在pom文件里加入这个插件即可:

    JAVA葵花宝典
  • Spring Boot 打的包为什么能直接运行?

    Spring Boot 提供了一个插件 spring-boot-maven-plugin 用于把程序打包成一个可执行的jar包。

    Java技术栈
  • 如何将Java工程导出成可以执行的jar

    需要指定一个Launch configuration,以及打包时的库文件处理策略:package required libraries into generat...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券