webpack基础配置

最新推荐文章于 2024-07-04 23:58:10 发布
最新推荐文章于 2024-07-04 23:58:10 发布
阅读量118 收藏
点赞数
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44134882/article/details/131224553
版权
文章探讨了Webpack的配置细节，包括在babel.config.js中设置options，处理CSS样式兼容性问题，以及在package.json中的配置。提到了如何封装函数来管理配置，使用插件进行CSS压缩和避免闪屏现象。还讨论了开发和生产模式的差异，Webpack的entry和output配置，以及devServer的使用。最后，文章总结了Webpack的基本功能和脚本指令的用法。
摘要由CSDN通过智能技术生成

入口和输出

 加载器module

 

options配置项写在babel.config.js文件

css的样式兼容性问题

 

同时在package.json中添加配置

 处理一下css兼容性问题的代码（代码块太大，不美观）

        封装一个函数，在调用的时候返回配置，用fulter过滤一下（不传参的时候就不返回pre项）

 基本的css压缩：

 

 

 

 插件：plugins

eslint配置 

 eslint配置文件

 

处理css资源，避免闪屏现象，（这个插件会用link标签引入css资源）

 

 

 

模式：mode

开发环境和生产环境

        绝对路径需要注意修改

 

 

配置package.json文件的启动打包命令

 浅浅总结一下：

  1. 两种开发模式
  • 开发模式：代码能编译自动化运行
  • 生产模式：代码编译优化输出
  1. Webpack 基本功能
  • 开发模式：可以编译 ES Module 语法
  • 生产模式：可以编译 ES Module 语法，压缩 js 代码
  1. Webpack 配置文件
  • 5 个核心概念
    • entry
    • output
    • loader
    • plugins
    • mode
  • devServer 配置
  1. Webpack 脚本指令用法
  • webpack 直接打包输出
  • webpack serve 启动开发服务器，内存编译打包没有输出

 

长术长术
关注
Webpack中常规配置项
lc_web的博客
06-07 1664
1、webpack.config.js 配置文件 当我们安装好webpack之后，就可以使用webpack命令了，比如要将一个main.js文件打包成一个bundle.js文件，可以使用如下命令： webpack main.js bundle.js 一般在实际的项目开发中，要把这些命令写到一个webpack.config.js的文件中。上面打包操作可以做如下配置： module.exports = { entry: './main.js', output: { filename: 'bundle.
webpack配置项介绍
zxm802376的专栏
12-08 563
什么是webpack？ 模块化管理及打包工具 Webpack的工作方式：如下图所示，把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。 配置项介绍 // “__dirname”是node.js中的一个全局变量，它指向当前...
webpack常见的配置项
weixin_33816946的博客
07-13 1670
  使用vue init webpack test(项目文件夹名)命令初始化一个vue项目，cd test，然后安装依赖npm install之后会生成一些默认的文件夹和文件，这些文件和文件夹中有些和配置有关的。如果去专门的了解webpack一定会云里雾里，这里简单说明一下常用的配置。 1.babelrc文件 这个文件放在根目录下面设置转码规则的。例如要想在代码中使用es6，就要在这个文件中...
Webpack配置全解析（基础篇）
2401_85123750的博客
07-04 476
在上面的代码中我们发现都是手动来生成index.html，然后引入打包后的bundle文件，但是这样太过繁琐，而且如果生成的bundle文件引入了hash值，每次生成的文件名称不一样，因此我们需要一个自动生成html的插件；发现跟我们的源码差距还是挺大的，本来是一个简单add函数，通过webpack的模块封装，已经很难理解原来代码的含义了，因此，我们需要将编译后的代码映射回源码；在webpack2和webpack3中我们需要手动加入插件来进行代码的压缩、环境变量的定义，还需要注意环境的判断，十分的繁琐；
webpack基本配置项
wangjilin1的博客
08-23 220
webpack一些基本配置项 const { resolve } = require("path"); // npm i html-webpack-plugin -D const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { filename: "js/built.js", path: resolve(__dirna
webpack配置
dwdffefsd的博客
07-02 2384
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
前端路由&webpack基础配置详解
10-16
在现代前端开发中，路由管理和构建工具配置是两个不可或缺的核心话题。本文将深入探讨前端路由的工作...以上即为前端路由与webpack基础配置的详细解析。希望本文能帮助读者更好地理解前端路由及webpack配置的实际应用。
webpack基础配置教程
06-27
webpack基础配置教程
ltadpoles#web-document#webpack基础配置1
07-25
前言虽然一直在接触 webpack ，不过都是在项目开发时遇到问题去看看文档，并没有系统化地学习、消化。这篇文章将从 webapck 最基本的配置开始说起，直到
代码拆分和按需加载（CodeSplitting）：Webpack基础配置与使用.docx
最新发布
08-28
代码拆分和按需加载（CodeSplitting）：Webpack基础配置与使用.docx
webpack配置文件和常用配置项介绍
08-30
本篇文章主要介绍了webpack配置文件和常用配置项的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
webpack的配置
Primise7的博客
06-25 254
1.npm install -g webpack 2.配置webpack.config.js文件，文件的配置类似于gulp 3.通过配置文件中的entry获取到文件，output将文件输出 4.webpack通过loader（加载器）和plugin（插件）处理文件 eslint做js的文件检测 webpack的项目打包 webpack主要是以模块化的方式打包整个...
webpack 常用配置项
韩吉鑫的博客
11-09 327
const path = require('path'); moudule.exports = { // entry 表示入口webpack 执行构建的第一步将从entry开始 // 类型可以使 string object array entry: './src/entry', // 只有一个入口时 entry: ['./src/entry', './src/e...
webpack: 基础配置项
camille的专栏
05-17 1001
output path [optional] (/dist) 默认值为dist。 将在项目根目录（跟package.json平级的位置）上创建一个dist目录用来存储webpack后的输出。 publicPath [optional] publicPath用来指定应用程序中所有资源的基础路径。 https://webpack.docschina.org/guides/public-path/ ...
webpack系统学习（二） webpack基础配置项
Niall_Tonshall的博客
02-12 2417
webpack具有相当多的配置项，常见且基础的配置项如entry，output，mode，plugins等等，这篇博客是笔者关于这些基础配置的知识整理。 1. entry 起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。 module.exports = { // entry: './src/js/hello.js', entry: { main: './src/js/hello.js' } } 2. output output
webpack配置文件常用配置项
m0_46439976的博客
08-11 287
const path=require('path') const HtmlWebpackPlugin=require('html-webpack-plugin') module.exports={ //context替换路径 context:path.join(__dirname,'/src'), //入口文件地址 entry:{ detail:'./js/detail.js', index:'./js/index.js', },
webpack（2）——配置项详解
weixin_33804990的博客
05-18 329
引子 昨天有关 Webpack 笔记也是有许多人喜爱的，所以今天再接再厉汇总了第二篇笔记，欢迎各位指点不足之处。 之后的笔记应该会记录一些实际开发了，希望在这个周末内彻底入门 Webapck。 webpack (1)——核心概念的理解 webpack（2）——配置项详解 ... 1. mode mode 配置项是 webpack4 新增的配置项，这个配置项是必须的。 如果使用的不是 we...
webpack基础配置与使用指南
在JavaScript模块打包之后，可以在浏览器中直接运行，这是webpack的基础功能。除此之外，它还能进行以下操作： 1. **CSS打包**：通过css-loader和style-loader将CSS文件打包到JavaScript中。 2. **图片打包**：使用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值