webpack 的基本使用——配置打包的入口与出口||配置 webpack 的自动打包功能

2024-06-07 13:42:17

配置打包的入口与出口

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 的自动打包功能

① 运行 npm install webpack-dev-server –D 命令，安装支持项目自动打包的工具

② 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {

"dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行

}

③ 将 src -> index.html 中，script 脚本的引用路径，修改为 "/buldle.js“

④ 运行 npm run dev 命令，重新进行打包

⑤ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：

 webpack-dev-server 会启动一个实时打包的 http 服务器

 webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的

webpack 的基本使用——配置打包的入口与出口||配置 webpack 的自动打包功能相关推荐

webpack的使用、安装和配置打包的入口和出口
webpack的基本使用在这里我使用VScode为编辑器讲解隔行变色案例第一步:创建项目空白文件,并在终端中运行npm init -y 命令.初始化包管理配置文件package.json 第二步 ...
Node.js webpack 打包的入口与出口
webpack 的 4.x 版本中默认约定: 打包的入口文件为 src -> index.js 打包的输出文件为 dist -> main.js 可以自定义: const path = r ...
ios 自动打包命令_iOS：使用jenkins实现xcode自动打包（最新）
参考各种教程实现Jenkins自动化打包遇到点坑,特此把自己成功安装的步骤记录一下. 一.安装jenkins 首先使用osx系统自带的homebrew来安装jenkins. 在终端中运行:$ brew ...
ios jenkins配置_Jenkins一：iOS自动打包完整实践
后续文章:Jenkins二:参数化构建iOS自动打包快捷记录:如果jenkins是用dmg安装,因为权限问题不能访问keychain时,每次新添加一个p12文件都要如此, /Users/管理员用户名 ...
使用EXE4J自动打包可运行jar文件
Eclipse提供了两种打包jar包的方式:jar文件和可运行jar文件(导出-->Java 菜单中).这两者的区别在于,导出的jar文件前者不可以直接运行,后者(可运行jar文件)可直接运行. ...
同时打包多个场景_人机CP模式闯入“打包界”，智能设备让每一厘米纸箱物尽其用...
618全球年中购物节已经结束,海量包裹进入千家万户,而这背后,是包装箱.纸袋.塑料袋的大量消耗.中国是全球第一大快递国,2018年快递总量超过507亿件,每一件快递都有相应的纸箱.塑料袋进行包装,加上 ...
建立apk定时自动打包系统第三篇——代码自动更新、APP自动打包系统
我们的思路是每天下班后团队各成员在指定的时间(例如下午18:30)之前把各自的代码上传到SVN,然后服务器在指定的时间(例如下午18:30)更新代码.执行ant 打包命令.最后将apk包存放在指定目录 ...
webpack打包后引用cdn的js_呕心沥血编写的webpack多入口零基础配置【建议收藏】...
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
Webpack实战（三）：作为前端你不得不懂的Webpack资源入口和出口的配置
关于Webpack前两篇跟大家分享的主要是Webpack的一些基本的配置,今天开始我们详细了解一下有关Webpack的各种配置,今天主要跟大家分享的是Webpack的资源入口和资源出口的配置. 如果想 ...

最新文章

热门文章