webpack4.x最佳实践-2.webpack基本环境搭建

最新推荐文章于 2022-08-28 14:29:19 发布
最新推荐文章于 2022-08-28 14:29:19 发布
阅读量336 收藏
点赞数
分类专栏： 前端学习笔记 前端工程化 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HYB2012/article/details/91354107
版权

文章目录

nodejs安装

webpack是基于node环境的，所以先确认安装了node环境

npm安装

npm是node环境下的包管理器，后续将同构npm安装一些webpack插件

webpack安装

webpack一般要安装在项目目录下来兼顾不同的项目

npm i webpack

npm i webpack-cli

项目中的webpack初始配置

利用webpack默认配置文件打包

npx webpack ./src/index.js

Hash: 8a13201335a0376bb3d1
Version: webpack 4.33.0
Time: 384ms
Built at: 06/09/2019 3:56:13 PM
  Asset     Size  Chunks             Chunk Names
main.js  1.3 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js + 3 modules 801 bytes {0} [built]
    | ./src/index.js 165 bytes [built]
    | ./src/header.js 209 bytes [built]
    | ./src/sidebar.js 215 bytes [built]
    | ./src/content.js 212 bytes [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

自定义webpack配置文件

  • 1 进入项目目录下，创建自定义配置文件
mkdir config
touch webpack.config.js

编辑初始配置

const path=require('path')

module.exports={
  mode:'development',// 设置开发模式下
  entry:'./src/index.js', //指定入口文件 注意路径是相对与根目录的
  output:{
    filename:'bundle.js', //指定生成的文件名
    path:path.resolve(__dirname,'../dist') // 指定生成chunk的存放位置，注意路径必须四绝对路径
  }
}
  • 2 添加script命令

“bundle:dev”:"webpack --config ./config/webpack.config.js "
指定webpack的配置文件为config目录下的webpack.config.js
如果不配置–config,自定义的配置文件必须为webpack.config.js，也必须放在根目录下

  • 3 执行打包命令

npm run bundle:dev

引入chunk查看效果

<body>
  <!-- index.html -->
  <div id="root">
    <p>webpack4 demo</p>
  </div>
  <script src="../dist/bundle.js"></script>
</body>

波帝伯爵
关注
专栏目录
Webpack 4 配置最佳实践
weixin_34178244的博客
06-25 243
作者 Daniel 蚂蚁金服·数据体验技术团队 Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有了新版配置的文档。社区中一些开发者也已经成功试水，升级到了 Webpa...
webpack4最佳实践参考
10-25 1035
webpack.config.js文件拆分 建议拆分成base（公共部分）、dev（开发环境）、prod（生产环境）三个文件，再用webpack-merge整合起来。   webpack.base.conf.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); ...
webpack4-用之初体验，一起敲它十一遍
weixin_34032827的博客
04-26 279
众所周知，webpack进入第4个大版本已经有2个月的时间了，而且webpack团队升级更新的速度也是非常的惊人 在写下如下内容的时候webpack已经出到了4.6的版本了，剑指5.0应该是指日可待了，当然这些都是个人的臆想，并不代表任何意见 既然我们已经迎接了webpack4的到来了，那么就一起来使用一下，即使你没用过之前的版本，没关系，我们重新出发，将工作中常用到的配置写给大家来看 非友情提示...
webpack4.x最佳实践-3.webpack中的基本概念
厚积薄发
12-02 327
webpack中的基本概念
weex搭建最佳实践
迪拉克之海
11-18 617
本文详细讲解如何搭建weex开发环境 一、前端必备node.js + webpack部分(weex-toolkit自带webpack，可不装webpack) 1、安装node.js（现在的node一般都会集成npm,管理node依赖包用的） windos系统推荐 win7 64位或者win10 64位 点击链接http://nodejs.cn/download/ 选择你需要安装的版本（window...
webpack5.x:webpack5.x模板
05-04
Webpack 5.x 模板提供了从零开始搭建项目的基础，无论项目规模大小，都能满足其配置需求。下面将详细介绍Webpack 5.x 的主要特性和使用方法。 一、主要特性 1. **性能提升**：Webpack 5.x 引入了对大文件和大型项目...
vue-cli4.x环境搭建
01-08
Vue CLI 4.x 是 Vue.js 官方提供的一款强大的脚手架...以上就是 Vue CLI 4.x 的环境搭建和项目配置的基本步骤，理解并掌握这些操作将帮助你高效地开发 Vue.js 应用。记得查阅官方文档，以便获取最新的信息和最佳实践。
node-v18.13.0-win-x64.zip
01-30
10. **社区与工具**：Node.js 社区活跃，有许多优秀的开发工具（如VS Code的Node.js插件）、框架（Express、Koa、Next.js等）和最佳实践，方便开发者进行高效开发。 下载并解压 "node-v18.13.0-win-x64.zip" 后，...
node-v12.22.12-x64.rar
最新发布
06-25
Vue CLI提供了一套快速搭建应用的脚手架，集成了最佳实践和配置，简化了项目初始化过程。 3. 后端与前端协同开发 - API接口开发：Node.js可利用Express或Koa等框架搭建API服务器，为Vue.js前端提供数据接口。 - ...
将vuecli2项目升级webpack4项目模板
08-09
- 升级过程中，务必遵循官方文档和社区的最佳实践，以确保平稳过渡。 - 如果你使用了 `vue-cli-service`，那么可能需要使用 Vue CLI 3 或更高版本，因为 Vue CLI 2 不支持 Webpack 4。 - 在进行大型项目升级时，...
16.webpack4生产环境配置
weixin_43893483的博客
08-28 395
webpack4生产环境基本配置
webpack4 配置
Abudula__的博客
10-20 200
步骤 1.建立一个demo文件 index.html如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpcak 配置文件</title> </head> <body> <h1 id="he...
基于vue2.0的weex实践（前端视角）
weixin_34406086的博客
03-04 185
19年目标：消灭英语！我新开了一个公众号记录一个程序员学英语的历程 有提升英语诉求的小伙伴可以关注公众号：csenglish 程序员学英语，每天花10分钟交作业，跟我一起学英语吧 前提：这段时间将公司的几个用we写的weex页面用vue2.0进行了重构，客户端的weexsdk也更新到了0.10.0版本。这篇文章将会在前端视角写到一些新老版本之间有差异的地方。we老版本的实践文章 wee...
IDEA使用webpack管理vue前端项目
猫七姑娘的胡同小巷
05-04 3690
IDEA使用webpack管理vue前端项目 文章目录IDEA使用webpack管理vue前端项目webpack介绍安装webpack步骤1.安装node.js。步骤2：安装npm步骤3：安装cnpm步骤4：安装webpack 使用vue.js开发大型应用需要使用webpack打包工具，本节研究webpack的使用方法。 webpack介绍 Webpack 是一个前端资源的打包工具，它可以将js、...
webpack4.x 入门一篇足矣
热门推荐
大灰狼的小绵羊哥哥的博客
06-26 1万+
前言：webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，提取公共文件，热更新等等。安装//全局安装 npm install -g webpack webpack-cli 创建文件夹初始化//创建文件夹 mkdir...
在IDEA中安装webpack
qq_43413774的博客
04-23 1983
webpack支持全局安装和本地安装，官方推荐是本地安装，我们按照官方的来。 安装最新版本webpack，输入命令：npm install --save-dev webpack webpack 4+ 版本，你还需要安装 CLI ，输入命令：npm install webpack webpack-cli --save-dev 此时我们打开package.json文件 当然我们也可以在IDEA中的Terminal中安装 打开package.js文件也是一样的 ...
Webpack5(从入门到精通)
weixin_43964148的博客
04-04 1万+
index.js:webpack 入口起点文件 1.运行指令： 开发环境：webpack ./src/index.js -o ./build/built.js --mode=development webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js 生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
从实践中寻找webpack4最优配置
weixin_34228617的博客
05-25 287
笔者最近在准备给fle-cli升级到webpack4版本，觉得有必要将探索过程的经验分享给大家，遂决定写这篇文章。（不知道fle-cli？看这里） webpack4是大趋势，升级是必然的，那么为什么现在才升级？ 原因有以下几个方面： 刚发布的版本还不稳定，潜在风险大，而目前版本已更新到4.8.3，基本处于稳定； webpack社区工具未完全跟上节奏，好多工具都得自己搞，劳心劳力（其实主要就是懒哈...
从零开始：Webpack 4.x搭建前端开发环境详解
最后，作者提供了一个GitHub仓库链接`https://github.com/gerryli0214/webpack-demo`，供读者参考和实践搭建过程。学习Webpack 4.x 不仅能提升前端开发能力，还能更好地理解现代前端项目的构建流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值