webpack - 包构建工具从基础配置到打包发布

最新推荐文章于 2022-12-29 17:47:21 发布
置顶 VIP文章 最新推荐文章于 2022-12-29 17:47:21 发布
阅读量1.3k 收藏 3
点赞数 2
分类专栏： JavaScript Vue 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tian_tian_gong/article/details/121303872
版权

webpack是当前前端最热门的前端资源模块化管理和打包工具之一。

基于node.js环境，提供前端模块化支持，代码压缩混淆，处理浏览器端JavaScript兼容性，性能优化等。

项目中使用了webpack工具并且正常配置之后，我们就可以轻松使用模块化语法 import/export，less语法, es6转es5等等，让开发变得简单起来。

webpack官方文档：概念 | webpack 中文文档

⚠️   要安装webpack之前，必须保证电脑中已经安装了node.js。 Node.js可以使用npm安装各种插件。

目录

一. 基本配置

1.nodeJs官网 按电脑配置直接下载即可；

2.安装完成后在cmd命令中输入 node -v, 可以看到node版本号即表示安装成功。

3. npm init -y 生成package.json配置文件 

4. 项目中安装webpack（如果是webpack 4.0及以上版本，在安装webpack的同时还需要安装webpack-cli）

 5.在项目根目录下创建webpack.config.js配置文件，并初始化基本配置

最低0.47元/天 解锁文章
飒小北
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodemon-webpack-plugin：一个使用Nodemon启动并重新加载服务器的Webpack插件
02-05
Nodemon Webpack插件 使用监视并重新启动模块的输出文件（大概是服务器），但仅当webpack处于监视模式时（即--watch ）。 无需另外安装，配置和运行Nodemon。 安装 npm install nodemon-webpack-plugin --save-dev 用法 const NodemonPlugin = require ( 'nodemon-webpack-plugin' ) ; // Ding module . exports = { entry : './src/server.js' , output : { path : path . r
Node.js入门与 Webpack模块打包工具
ClearloveYt的博客
06-24 2268
Node.js 模块化：把每个文件当做一个模块，独立作用域，按需加载，使用特定标准语法导出和导入使用CommonJS 标准：一般应用在 Node.js 项目环境中ECMAScript 标准：一般应用在前端工程化项目中Node.js 包：把模块文件，代码文件，其他资料聚合成一个文件夹就是包项目包：编写项目需求和业务逻辑的文件夹软件包：封装工具和方法进行使用的文件夹（一般使用 npm 管理）本地软件包：作用在当前项目，封装的属性/方法，供项目调用编写业务需求。
vue+webpack+nodemon实时打包项目,自动重启项目Nodemon
qq_38402659的博客
08-12 822
实时打包项目方法： 1,安装nodemon 2,package.json重新编写start方法 监控src文件夹下所有的html/vue/js/less文件 有更改则自动打包 "scripts": { "dev": "node build/dev-server.js", "dist": "nodemon --watch src -e html,vue,js,less build...
webpack5.第五篇
疯子的梦想@的博客
12-31 495
webpack5webpack性能优化开发环境性能优化（HMR）source_maponeOF生产环境的缓存配置 webpack性能优化 主要包括以下几点 # WEBPACK性能优化 * 开发环境性能优化 * 生产环境性能优化 ## 开发环境性能优化 * 优化打包构建速度 * 优化代码调试 ## 生产环境性能优化 * 优化打包构建速度 * 优化代码运行的性能 开发环境性能优化（HMR） 将webpack第二篇文章中构建好的开发环境配置工程完整复制一份，并重命名。 在终端输入npx webpack se
nodemon的使用,electron打包
liulang68的博客
03-27 364
https://www.bilibili.com/video/BV1B7411X7MQ?spm_id_from=333.1007.top_right_bar_window_history.content.click
webpack-base-demo2.zip
06-24
webpack基础demo，可用于构建webpack项目 其中包含了 1 样式加载器css，sass，less 2 图片加载器 3 webpack-dev-server本地开发热更新 4 babel配置： （1）babel：解决不支持语法转义es6转义为es5 cnpm i --save-...
react-webpack-starter：:soccer_ball:最好的react webpack启动（使用es6和其他基础知识）
01-31
将许多模块打包到少数捆绑资产中。 一个优秀的，基本的webpack设置，包含基本要素。 生产和开发配置 明智的装载机包括： sass-loader ：将您的scss转换为css。 babel-loader ：将您的es6（ES2015）转换为js。 ...
webpack独立打包和缓存处理详解
12-11
本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法。 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码： var path = require('path'); module.exports = { ...
详解使用webpack构建多页面应用
11-29
关于webpack的配置和使用，网上已经有许多文章了，大多是在讲单页应用，当我们需要打包多个html时，事情就变得麻烦起来。怎么在webpack-dev-server里使用路由？怎么打包多个html和js chunk并自动更新md5？本文讲的...
webpack5-vue3:基于Webpack5的Vue3框架
05-13
webpack 构建优化（缓存、多核、抽离、拆分）（ 手动 babel-loader 开启缓存（webpack5内置 cache 功能） 忽略打包、按需加载：IngorePlugin 不解析代码：exclude happyPack：多线程打包 提取公共代码和第三方代码 ...
简单配置webpack，手写笔记
m0_63161369的博客
05-29 181
webpack （版本都使用4点多的即可） webpack默认只能打包 .js 后缀名结尾的模块。其他非 .js后缀名结尾的模块需要调用 loader加载器才能正常打包，否则报错 初始化项目 npm init -y 创建src目录 1.安装npm i webpack@5.5.1 webpack[email protected] -D // -D 只需要在开发版本使用配置 2.配置 2-1.项目根目录 创建webpack.config.js的webpack配置文件 const path=requ...
webpack的生产模式与开发模式详情
M_Edison的博客
03-26 1071
文章目录1.webpack简介1.1 ~是什么1.2 基本的五个概念1.3 安装2.webpack开发环境基本配置2.1 简单使用webpack打包js文件2.2 webpack.config.js文件2.3 打包样式资源css/less/sass...2.3 打包html资源2.4 打包图片资源2.5 打包其他资源2.6 使用dev-server2.7.开发环境的基本配置3.webpack生产环境基本配置5.1 提取css成单独文件5.2 css兼容性处理5.3 压缩css5.4 js语法检查eslint
vue2篇（1）准备工作
qq_58487756的博客
12-01 404
vue项目基础搭建
webpack html发布,使用webpack插件HtmlWebpackPlugin发布html文件
weixin_35019679的博客
06-15 105
参考HtmlWebpackPlugin在webpack中使用HtmlWebpackPlugin来帮助打包html文件，并输出一个包含所有编译打包后的资源的HTML5文件到dist目录下；配置1.创建本地项目webpack-demomkdir webpack-democd webpack-demo2.在webpack-demo的根目录下创建package.json文件npm init -y安装web...
使用 webpack 对项目进行打包发布
黑马程序员官方博客
12-29 962
项目开发完成之后，需要使用 webpack对项目进行打包发布，主要原因有以下两点：① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件② 开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。在文件的scripts节点下，新增 build 命令如下：--model是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩。
Webpack使用nodemon实时打包编译
weixin_33850015的博客
07-21 783
2019独角兽企业重金招聘Python工程师标准>>> ...
vue+webpack+nodemon实时打包项目
Akony的博客
01-23 1904
实时打包项目方法： 安装nodemon package.json重新编写start方法 监控src文件夹下所有的html/vue/js/less文件 有更改则自动打包 "scripts": { "dev": "node build/dev-server.js", "start": "nodemon --watch
webpack-dev-server启动的前端项目使用nodemon监听自动重启
风烟
01-24 757
原来启动是这样 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 修改webpack需要手动重启，现在使用nodemon配置为自动重启 "start": "nodemon --exec npm run dev", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 然后配置
webpack 构建 支持 ES6/7 的 node 服务开发
snake89322的博客
01-09 994
1. 准备工作 2. 服务端程序 3. webpack 配置 3.1. 开发配置 3.2. 生产配置 4. 运行配置 5. 运行程序 6. 总结 7. 优化 level-1 7.1. 工具 7.2. 配置更改 8. 优化 level-2 9. 优化 level-3 1. 准备工作 安装 node 环境并创建项目 npm init … 安装 webpack，nodemon，con
vue webpack的打包
最新发布
09-05
Vue和Webpack是两个不同的技术，但它们可以一起使用来构建和打包Vue.js应用程序。在Vue中，Webpack是一个用于构建和打包前端资源的强大工具。Webpack的打包过程包括加载器(loader)和插件(plugin)的使用。 加载器(loader)主要用于处理非JavaScript资源，例如CSS、图片等。它们允许您将这些资源转换为模块，并将其包含在最终的打包文件中。加载器通常在Webpack配置文件中配置，并按照一定的规则（正则表达式）来处理相应的文件。 插件(plugin)则是对Webpack的功能的扩展，比如打包优化、文件压缩等。插件可以在Webpack配置文件中引入，并在构建过程中被调用。您可以根据自己的需求选择不同的插件来完成各种任务。 例如，您可以在Webpack配置文件中使用UglifyjsWebpackPlugin插件来进行代码压缩，以减小最终打包文件的大小。在另一个示例中，您可以使用webpack.ContextReplacementPlugin插件来配置打包上下文，以只打包指定的文件。 综上所述，Vue和Webpack在打包过程中使用加载器和插件来处理和优化前端资源。这些工具的灵活性使您能够根据自己的需求来定制和优化应用程序的打包过程。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue基础知识总结 9：vue webpack打包原理](https://blog.csdn.net/guorui_java/article/details/120584919)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue webpack 打包优化方法](https://blog.csdn.net/weixin_46653486/article/details/130380612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值