小牛的前端笔记--用webpack打包js和css文件

已于 2022-04-29 21:08:19 修改
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： webpack 前端 javascript
于 2022-04-29 21:07:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45748968/article/details/124503647
版权
这篇博客详细介绍了如何使用webpack打包JavaScript和CSS文件。对于JS打包，讲解了两种方法，包括创建webpack配置文件并运行编译命令，以及修改package.json文件后通过npm命令执行打包。在CSS打包部分，讨论了安装必要插件如css-loaders，解决npm安装过程中可能出现的问题，并在main.js中引入CSS文件。最后都需要更新HTML中引用的bundle.js路径。
摘要由CSDN通过智能技术生成

js打包

方法一

1.webpack目录下创建配置文件webpack.config.js

const path=require("path");//node.js内置模块
module.exports={
   
     entry:'./src/main.js',//配置入口文件为main.js（可更改&
最低0.47元/天 解锁文章
安分守己的蒟蒻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpackdemo只打包js、css
01-05
webpackdemo只打包js、css，这里只是简单的示例demo，复杂业务可以参考webpack官网。
Webpack安装与使用
ALin_Think的博客
04-05 420
Webpack 一、什么是Webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 二、Webpack安装 1、全局安装 npm install -g webpack webpack-cli...
webpack5基础
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-21 1039
webpack5基础
Webpack打包（JS和CSS）
summeblace的博客
08-03 195
Webpack打包（JS和CSS） 项目总目录结构 1、下载需要的软件包 命令： Js包： npm install webpack -g npm install webpack-cli -g Css包： cnpm install style-loader css-loader --save-dev 2、编写Js文件和Css文件，以及显示结果的html文件 bar.js exports.info = function (str){ document.write(str); } logic.
webpack打包安装(三)之解决css、js等的兼容性问题
wang_9909的博客
10-05 1045
我们都知道浏览器对一些css以及js语法有一些兼容性的问题，为了解决这些兼容性问题我们可以在webpack构建时安装工具去解决兼容性问题。 我们可以使用browserslist 1.browserslist 和之前的依赖文件一样，我们需要对其进行配置，在webpack.config.js中，增加browserslist。 其中： “>1%”表示市场占有大于1%的 "last 2 version"表示最新的2个版本 "not dead"表示依然还在运行并更新的浏览器 2.postcs
完美解决webpack打包css背景图片路径问题
11-20
在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__dirname, 'node_modules'), use: ['style-loader', 'css-loader', 'less-loader'] } 打包后在dist目录的发现没有css文件。这是因为css
optimize-css-assets-webpack-plugin:一个Webpack插件，用于优化\最小化CSS资产
04-28
安装： 使用npm： $ npm install --save-dev optimize-css-assets-webpack-plugin :warning: 对于webpack v3或更低版本，请使用optimize-css-assets-webpack-plugin@3.2.0 。 optimize-css-assets-webpack-plugin@...
postcss-variables-loader:使用Webpack + HMR在CSS和JS之间共享变量
04-28
允许您使用Webpack和HMR在CSS和JS之间共享变量。 该加载器将特殊CSS文件转换为JS模块。 CSS和JS之间的共享变量 HMR友好，CSS更改可即时应用。 为使JS更友好，加载器将： 从CSS px数字中删除px部分 将破折号转换...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue.js开发中，使用Vue CLI创建的项目通常会依赖Webpack进行构建和打包。Webpack是一个模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，生成适合部署到生产环境的静态资源。然而，在实际...
webpack 打包压缩js和css的方法示例
10-18
本文详细介绍了使用Webpack进行JS和CSS文件打包与压缩的方法，并提供了配置示例。Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)，在处理前端资源时非常有用。它通过加载器(loaders)和插件...
react-mobx-antd-webpack:使用webpack打包有关mobx和antd的react.js的模板
05-19
4. **Webpack**: Webpack是一个模块打包工具，它可以将项目中的各种资源（如JavaScript、CSS、图片等）打包成浏览器可识别的格式。Webpack通过配置文件（webpack.config.js）来定义资源处理规则，如加载器（loaders...
使用Webpack对JS文件进行打包构建并在配置文件中指定打包路径
01-08
一、介绍 Webpack 简称模块打包机 在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端的一个项目构建工具 基于Node.js开发 因此 若要使用webpack 必须先安装Node.js 借助Webpack这个前端自动化构建工具 可以完美实现资源的合并 打包 压缩 混淆等诸多功能 示意图： 官网：https://webpack.github.io 二、安装 在新版本中 需要分开安装webpack和webpack-cli 安装web
Webpack中css-loader和less-loader的使用教程
12-03
Webpack 是一个现代JavaScript应用程序的模块打包工具，它允许开发者将分散的模块文件组合成单一的可部署资源。在处理CSS和预处理器语言如Less时，Webpack 提供了专门的加载器（loader）来处理这些任务。本文将详细...
纯html+javascript+css webpack打包的项目
04-12
- **加载器(loaders)**：允许Webpack处理非JavaScript文件，例如使用Babel将ES6转换为浏览器兼容的ES5，或者使用CSS Loader处理CSS文件。 - **插件(plugins)**：扩展Webpack的功能，比如ExtractTextWebpackPlugin...
webpack-tailwindcss:在 Webpack 中使用 TailwindCSS
07-23
webpack-tailwindcss 此模板旨在帮助您基于 Webpack + TailwindCSS 启动您的项目，同时保持最佳性能实践设置，因此您不必担心基础知识。 它为您设置了一些设置，因此您不必在文档、...使用mini-css-extract-plugin
clean-css-loader:用于Webpack的CleanCSS加载器模块
05-26
clean-css-loader 安装 yarn add -D clean-css-loader 用法 通过Webpack配置，CLI或内联方式使用加载程序。 通过webpack配置（推荐） webpack.config.js const isProductionMode = process . env . NODE_ENV === ...
【webpack脱坑指南】打包之后css中资源文件路径不正确
harryperlau的博客
01-07 910
bug描述 项目中使用了 layer，在执行 webpack 打包编译之后，layer.css 文件中用到的资源文件路径找不到，导致放大和关闭图标无法在页面上正常显示。 原因：（来自官方文档） 对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在...
使用webpack打包js，css文件
yebadi_的博客
08-06 143
首先环境要搭好 npm install -g webpack webpack-cli npm install --save-dev style-loader css-loader # 打包css的插件 1.进入文件终端 执行 npm init -y # -y表示全盘默认 2. 在根目录下创建配置文件webpack.config.js const path = require("path"); //Node.js内置模块 module.exports = { entry: './src/
使用mini-css-extract-plugin插件让webpack将css打包到css目录中 路径发生错误
06-06
如果使用 `mini-css-extract-plugin` 插件让 webpack 将 CSS 打包到一个单独的 CSS 文件中，而 CSS 文件中的 URL 路径发生了错误，一般有两种情况： 1. CSS 中的相对路径错误：在 CSS 文件中使用的相对路径应该相...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值