webpack

最新推荐文章于 2022-03-07 11:13:33 发布
最新推荐文章于 2022-03-07 11:13:33 发布
阅读量167 收藏
点赞数
分类专栏： node.js 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40944918/article/details/101224139
版权

webpack

是一个模块打包器，能够把所有的文件都当做是一个模块

它把所有的文件资源(js,json,css,sass,图片)都看作为模块

将这些文件资源解析处理以后，生成对应的打包文件

使用webpack构建一些应用也是非常方便，比如基于

node webpack vue-cli构建vue程序(脚手架)

webpack是一个基于node.js运行环境，用于打包本地文件

之间相互依赖并最终输出成单个文件的工具，就像npm工具可以下载安装包一样

webpack能够帮助我们解决

1.打包js文件

文件结构
	dist目录
  src目录
  	app.js
		1.js
  index.html
  • 在项目的根目录下面初始化

​ npm init -y

  • 装包 webpack

​ npm install webpack@3 -g

  • 打包

​ webpack 源文件路径 打包到新文件路径

​ webpack ./src/app.js ./dist/bundle.js

  • 在index.html中 引入打包后的文件路径

配置 行命令繁琐

在新项目根目录下新建一个文件:webpack.config.js

##2.打包json文件

直接暴露，然后引入即可，js插件解决

##3.打包css文件

  • 安装：npm i style-loader css-loader -D

  • 创建style.css 并书写相关样式

  • app.js中引入：require(’./style.css’)或者 import css from ‘./style.css’//引入时加后缀名

  • 配置 在webpack .config.js 加入

    •  module:{
        rules:[{
            test:/\.css$/,//解析css
            use:['style-loader','css-loader']//从右向左解析
        }]
    }

  • 在cmd 运行webpack进行打包

##4.打包css中的图片

  • 安装:npm i url-loader file-loader -D

  • 配置webpack.config.js （放在reules配置css下面）

     use:[{
                loader:'url-loader',
                option:{
                    limit:8192,
                    
                }
            }]

  • 运行cmd webpack打包

5.打包处理页面里面的img标签

  • 安装 npm install html-withimg-loader --save

  • 运行 webpack.config.js中配置modules.rules（放在图片下面)

    {
  test:/\(htm|html$/i,
  loader:'html-withimg-loader'
}

  • 使用插件html-webpack-plugin

    需要下载webpack到本地

    npm install --save-dev webpack@3

  • 下载包

    npm i html-webpack-plugin -S

  • 插件放在module 后面

    配置
    filename
	就是html文件的文件名，默认是index.html
	template
	指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等
	。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的loader哦。
	//引入 
	var htmlWebpackPlugin = require('html-webpack-plugin')
	
	//插件 放在module 后面
	plugins:[
        new htmlWebpackPlugin({
            //生成的html文件 不用指定输出目录 因为出门文件已经设置
            filename:"a.html",
            //已经有的html 模板 
            template:"./index.html" //打包页面
        })
    ]

    压缩js

    为什么要压缩？
压缩文件可以减少文件大小，可以去除不必要的空格和换行，对于图片文件
可以把质量调低，文件大小 小了，网络字节量也就小了，用户下载速度就
会变快

    如果是新建的文件目录：那么需要初始化：

    npm init -y

  • 安装webpack@3.1.0

    • npm i --save-dev webpack@3.1.0
  • webpack.config.js文件中新添加一个插件
	  var  webpack = require("webpack");
	//plugins: [new webpack.optimize.UglifyJsPlugin() // 压缩js文件]
    plugins:[
        new htmlWebpackPlugin({
            //生成的html文件 不用指定输出目录 因为出门文件已经设置
            filename:"a.html",
            //已经有的html 
            template:"./index.html"
        }),
        new webpack.optimize.UglifyJsPlugin(), //压缩js文件
        //单独打包 生成的路径的
       // new ExtractTextPlugin("style.css"),
       //压缩
       // new OptimizeCssplugin()
    ]

  • 运行cmd 进行压缩

压缩css文件

  • 安装包:npm i --save-dev extract-text–webpack-plugin@3.0.2

  • 安装压缩css文件的插件

    • npm install --save-dev optimize-css-assets-webpack-plugin@3.2.0

  • 在webpack.config.js中配置

压缩图片文件

  • 新建文件目录

    dist

    src

    加载图片

    1.jpg

    app.js：引入图片

    webpack.config.js配置文件

  • 初始化:

    • npm init -y

  • 安装包

    • npm i --save-dev url-loader@1.1.2 file-loader@2.0.0 image-webpack-loader@4.6.0

  • 安装webpack到本地

    • npm i --save-dev webpack@3

  • 在index.js导入这章图片

    • import “./1.png”

  • 运行cmd webpack进行打包压缩

雪碧图

  • 新建文件目录

​ dist

​ src

​ icons 图标

​ app.js

​ index.html

  • 初始化包

    • npm init -y

  • 安装

    • npm install webpack-spritesmith@1.0.0

  • 安装webpack

    • npm install webpack@3 --save-dev

  • 安装 html-webpack-plugin插件

    • npm i --save-dev html-webpack-plugin@3.2.0

  • 安装导入

    • const WebpackPlugin = require(‘html-webpack-plugin’)
    • const Spritesmith
  • target :{
  //生成雪碧图（大图）文件存放路径
  image:path.resolve(__dirname,'dist/sprite/sprite.png'),
    css:path.resolve(__diname,'dist/sprite/sprite.css')
  
},
  //样式文件中 雪碧图的写法 
 apiOptions:{
   al
 }

  • 在根目录index.html中

    <link rel="stylesheet" href="./sprite.css">
  </head>
<body>
	 <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  
</body>

  • 在app.js中

    document.getElementById("one").classList.add("icon-4");
document.getElementById("two").classList.add("icon-2");
document.getElementById("three").classList.add("icon-right");

  • 在webpack.config.js中配置

    在plugins下添加
   new WebpackHtmlPlugin({
            template:"./src/index.html"
        })

  • 运行cmd webpack 将在 dist目录下生成 一个文件夹和一个html，里面有打包的精灵图，打开html即可在网页中看到精灵图

一路向北@L
关注
专栏目录
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
requires a peer of webpack@^3.1.0 but webpack@4.41.2 was installed
qq_30908729的博客
11-27 2714
关于requires a peer of webpack@^3.1.0 but webpack@4.41.2 was installed 解决方法： 我发现在cnpm install 时有警告：requires a peer of webpack@^3.1.0 but webpack@4.41.2 was installed，可以看出webpack版本有問題，就是我項目要求使用webpa...
3.1 webpack了解
weixin_43374578的博客
10-03 78
一、起源 1. 为什么需要 前端js代码的模块化开发，导致前端包含了很多如 css，html，js，png，sas等文件，有些文件不能直接放在服务器上被浏览器解析到； 同时如CommonJs，AMD等模块快的代码，浏览器解析不了； 2. 作用 引入webpack打包工具，将上面的文件先打包，解析，预处理，就可以放在服务器上直接被浏览器解析访问； 二、安装 webpack正常运行需要借助node软件(nodejs)的环境，因此要先安装nodejs； nodejs中包含了nodejs本身依赖的包，因此
webpack3升级webpack4
litCabbage的博客
06-17 1376
为了优化包体积大小，想要将老项目的webpack3升级到webpack4，再升级到webpack5 一、升级版本 1、webpack ^3.1.0 => ^4.29.6 2、webpack-cli ^3.1.2 => ^3.3.0 3、webpack-dev-server ^2.11.3 => ^3.2.1 4、html-webpack-plugin ^2.30.1 => ^3.2.0 5、vue-loader ^13.3.0 => ^15.7.0 （不升级，会报找.
npm安装webpack时,报错npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed
gabby____的博客
05-13 2139
npm安装webpack时,报错npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed 报错 WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You mus...
webpack3中文版使用参考文档--全面解析webpack.config.js
weixin_30314793的博客
07-07 418
Webpack目前官方发布的最新版本是3.1.0，相对于2.0的版本，在语法上没有变动，只是新增了功能。使用webpack，需要事先安装node.js，并对node.js生态有一些基本的了解,比如(npm init 初始化项目，npm install 安装一个包等等)。使用webpack通常有两种方式：1. 命令行方式（CLI) , 2 script方式（推荐）。 两种方式都需要理解webpack...
若依vue3,基于webpack(非vite版本)
最新发布
01-02
2. **Webpack**: Webpack的核心概念是模块化，它通过配置文件（webpack.config.js）来定义如何处理不同类型的文件。Webpack的主要任务包括：模块解析、加载、编译和打包。它支持预处理器（如Sass/LESS for CSS）和后...
手把手搭建h5框架,webpack+jq 与webpack +vue
11-21
手把手搭建h5框架,webpack+jq 与webpack +vue。 1.初始化一个npm项目 2.安装pnpm 3.安装webpack webpack-cli 4.新建webpack.config.js配置文件 5.安装babel 详细安装方式，手把手教程见README.md文档
webpack-develop.zip
11-01
Vue CLI（命令行接口）是官方提供的脚手架工具，它极大地简化了Vue项目的初始化过程，包括设置webpack配置、安装依赖等。在"webpack-develop.zip"这个压缩包中，我们很可能是找到了一个使用Vue CLI 3搭建的开发环境...
npm安装webpack时,报错npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed.
miracle
04-09 3万+
npm WARN ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.那么先使用npm install -g npm-install-peers后再安装npm install webpack 就不会报错...
【webpack 中版本兼容性问题错误总结，耽误半天学习】
qq_27300101的博客
07-05 3万+
【webpack版本兼容性问题错误总结，耽误半天学习】一定不要运行npm i  XXX  -g(-d) 一定要指定版本，尽量低版本，也不最新版本，会导致不兼容和指令不一样的问题。1.安装webpack-dev-server 报错，说需要webpack-cli，原因，这两个之中某一个版本太高。，重新安装低版本2.安装webpack-cli ，然后还是不能使用，3. npm WARN webpack-...
webpack安装教程
m0_65005642的博客
03-07 1293
前提 运行 webpack 5 的 Node.js 最低版本是 10.13.0 node -v //查看node版本 npm -v // 查看npm版本 本地安装 要安装最新版本或特定版本，请运行以下命令之一： npm install --save-dev webpack //或指定版本 npm install --save-dev webpack@<version> 使用 webpack v4+ 版本，并且想要在命令行中调用 webpack，你还需要安装 CLI。 npm inst
npm打包出现警告，npm版本升级
热门推荐
公z号：职场爱学习
06-19 4万+
IDEA在使用npm打包命令时，突然提示“New minor version of npm available! 6.7.0 -> 6.13.4”，如下： 说明，npm有新版本可以更新。根据提示，执行以下命令，就可以更新npm版本了。 npm install -g npm
webpack总结和踩坑实录
daluzi的博客
07-15 1万+
Webpack总结 webpack是一个和gulp差不多的自动化的构建工具，功能还是很强大的，能够处理图片压缩，能够处理js，能够处理那些预编译的语言比如sass|scss、css等等，这一切都要归功于有个强大的loader功能。   准备篇 webpack是一个用node的npm包管理工具上的工具，下载和安装：npm install -g --save-dev webpack类似于这样。...
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins**
weixin_43750031的博客
11-20 3万+
出现 npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is ins** mac 安装webpack 报错 建议安装较低版本的webpack eg: * npm install webpack@3.0.0 -g
webpack3插件安装和配置
八卦程序的专栏
08-20 1268
基本安装mkdir webpack-config && cd webpack-config npm init -y cnpm install --save-dev webpack html-webpack-plugin clean-webpack-plugin webpack-dev-server插件介绍 名称 简介 html-webpack-plugin 自动生成index.html
webpack--生成html文件的插件：html-webpack-plugin
小毛贼_哪里逃
04-01 437
1 安装指定版本2的插件：npm i -D html-webpack-plugin@2 { "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &&a...
webpack的安装和使用
qq_18974353的博客
10-26 3511
webpack 目前最流行的前端自动化工具，这里只说用法，不做过多概念介绍。 安装 webpack的安装，当前最新版本为4.20.2，安装该版本的话一不小心就会踩坑。 安装node.js 在git控制台输入 $ node -v 检查当前node版本，没有出现版本号要先安装node, 安装npm 在git控制台输入 $ npm -v 检查当前node版本，没有出现版本号要先安装np...
Webpack入门与安装指南
"Webpack学习笔记是一个详细的指南，介绍了webpack的基本概念、安装方法以及配置过程。主要涵盖以下几个知识点： 1. 模块打包工具： Webpack是一个强大的模块打包工具，它支持两种模块导入规范：ESmodule（如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值