webpack入门速学笔记

最新推荐文章于 2024-05-21 21:38:53 发布
最新推荐文章于 2024-05-21 21:38:53 发布
阅读量159 收藏
点赞数
分类专栏： 前端 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mus123/article/details/107602952
版权

https://www.bilibili.com/video/BV1gA411B7M2?from=search&seid=11762398641701819399

文章目录

webpack学习

官方文档https://www.webpackjs.com/concepts/

image-20200726231243486

webpack是我们必须了解的打包工具

四个核心概念：

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

初始化

先全局安装webpack和webpack-cli

npm install webpack webpack-cli -g

进入demo01目录

然后，初始化生成package.json

npm init -y

image-20200726215148114

 tyarn add webpack webpack-cli

然后安装到项目依赖

image-20200726215456112

新建src/index.js的测试代码并引用data.json的数据

image-20200726215601601

执行下面命令的时候路径不对劲（发现全局安装用yarn是不太行 之后改回城npm安装全局）

开发环境的打包命令

webpack ./src/index.js -o ./dist/bundle_dev.js --mode=development

image-20200726222127128

生产环境的打包命令

webpack ./src/index.js -o ./dist/bundle_pro.js --mode=production

image-20200726222432380

生产环境没有注释并且压缩代码了，会小很多

而且webpack默认是可以处理js和json文件的，不需要loader和plugin

使用webpack.config.js

新建demo02 安装webpack和webpack-cli的依赖之后

新建webpack.config.js

let path=require('path')
module.exports={
    entry:"./src/index.js",//入口文件
    output:{
        filename:'bundle.js',//输出文件名
        path:path.resolve(__dirname,'dist')//输出路径，用绝对路径
    },
    mode:'development',
}

__dirname在node的环境下可以拿到webpack.config.js的运行目录

直接运行webpack

image-20200726223530276

使用loader加载样式打包

loader可以识别css等并一起打包

新建demo03，基本上可以使用demo02的内容，在根目录下放一个index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./dist/bundle.js"></script>
    <title>demo03</title>
</head>
<body>
    
</body>
</html>

然后src下面搞一个index.css

body{
    background-color: blanchedalmond;
}

在index.js中引入

import './index.css'

因为webpack默认不支持css引入，所以要使用loader

let path=require('path')
module.exports={
    entry:"./src/index.js",//入口文件
    output:{
        filename:'bundle.js',//输出文件名
        path:path.resolve(__dirname,'dist')//输出路径，用绝对路径
    },
    mode:'development',//生产模式
    module:{
        //对某种格式的文件进行转换处理
        rules:[
            {
                test:/\.css$/,//使用正则匹配
                use:[
                    //顺序从下到上
                    'style-loader',//把css-js引入到style
                    'css-loader',//把css转换成js
                ]
            }
        ]
    }
}

要安装两个loader依赖

image-20200726225234286

之前的颜色生效了

image-20200726225459114

image-20200726225620862

使用plugin插件

先可以实现自动整合编译，需要用到的插件为html-webpack-plugin要安装依赖

/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="./dist/bundle.js"></script> -->
    <title>demo04</title>
</head>
<body>
    
</body>
</html>

let path=require('path')
let HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:"./src/index.js",//入口文件
    output:{
        filename:'bundle.js',//输出文件名
        path:path.resolve(__dirname,'dist')//输出路径，用绝对路径
    },
    mode:'development',//生产模式
    module:{
        //对某种格式的文件进行转换处理
        rules:[
            {
                test:/\.css$/,//使用正则匹配
                use:[
                    //顺序从下到上
                    'style-loader',//把css-js引入到style
                    'css-loader',//把css转换成js
                ]
            }
        ]
    },
    //配置插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ]
}

运行webpack之后发现dist目录下有了新的index.html

image-20200726230832778

打包图片资源

新建demo05

image-20200726232222377

在入口index.js中引入图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="./dist/bundle.js"></script> -->
    <title>demo04</title>
</head>
<body>
    <img src="./src/webpack.png" alt="webpack">
</body>
</html>

这时候肯定要加关于png的依赖

需要两个loader： url-loader html-loader file-loader

let path=require('path')
let HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:"./src/index.js",//入口文件
    output:{
        filename:'bundle.js',//输出文件名
        path:path.resolve(__dirname,'dist')//输出路径，用绝对路径
    },
    mode:'development',//生产模式
    module:{
        //对某种格式的文件进行转换处理
        rules:[
            {
                test:/\.css$/,//使用正则匹配
                use:[
                    //顺序从下到上
                    'style-loader',//把css-js引入到style
                    'css-loader',//把css转换成js
                ]
            },{
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,//图片小于8kb,用base64处理，减少请求
                    esModule:false,//把url-loader的es6模块化解析取消，不加的话与html-loader冲突，src会变成object module
                    name:'[hash:10].[ext]',//取图片hash的前十位与扩展名来命名
                }
            },{
                test:/\.html$/,
                loader:'html-loader',//用来解析html
            }
        ]
    },
    //配置插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ]
}

image-20200726233718665

打包结果可以看见

image-20200726233857309

热更新

使用插件

tyarn add webpack-dev-server -g

let path=require('path')
let HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:"./src/index.js",//入口文件
    output:{
        filename:'bundle.js',//输出文件名
        path:path.resolve(__dirname,'dist'),//输出路径，用绝对路径
    },
    mode:'development',//生产模式
    module:{
        //对某种格式的文件进行转换处理
        rules:[
            {
                test:/\.css$/,//使用正则匹配
                use:[
                    //顺序从下到上
                    'style-loader',//把css-js引入到style
                    'css-loader',//把css转换成js
                ]
            },{
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,//图片小于8kb,用base64处理，减少请求
                    esModule:false,//把url-loader的es6模块化解析取消，不加的话与html-loader冲突，src会变成object module
                    name:'[hash:10].[ext]',//取图片hash的前十位与扩展名来命名
                }
            },{
                test:/\.html$/,
                loader:'html-loader',//用来解析html
            }
        ]
    },
    //配置插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    //开发服务环境
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),//开发环境路径，用绝对路径
        compress:true,//开启gzip压缩
        port:3001,//端口号
        open:true,//浏览器自动打开
    }
}

image-20200726234940639

可以热更新了

mus_木司
关注
专栏目录
webpack入门跟学笔记
lscheng的博客
10-30 1394
学习了两个星期，断断续续终于还是把webpack4学完了，我学习的时候webpack5是已经出来了的，但是大同小异先学webpack4再过渡到webpack5可以了解他们之间的差异，本次学习无项目实战，主要为webpack的配置详解，过程中因为版本问题也遇到了一些错误，在此记录我的学习笔记，这是跟做的版本，即有详细的步骤，后续还会想整理再发布一个知识点版的，大家一起进步！笔记如有错误，欢迎评论指正。 文章目录一、webpack概述1、什么是webpack2、需要提前掌握的内容3、最终掌握的webpack哪些
webpack 入门笔记
Caroline_Yang的博客
11-27 169
Windows下建项目文件夹（首先得在电脑上安装node 这个自己搞吧 是为了方便用npm下载依赖包 ，全局安装webpack npm install -g webpack ） 1、创建项目文件 终端输入mkdir inner 或者你自己直接新建文件夹也可以 2、进入新建的文件夹环境下cd./inner 3、在你的项目里安装webpack 终端输入 npm i --sav...
速学Webpack（一）--基础教程篇
weixin_42281924的博客
11-03 122
1.Webpack是什么？ webpack是一个功能强大的模块打包工具。可以处理各种各样的文件。 2.什么是模块化打包工具？ 就是把各个模块打包在一起。可以识别各种各样的模块化规范。 例如：amd，cmd，commondjs，es6。 webpack官方介绍 模块化相关api 3.安装Webpack 1.第一步：安装node环境：官网地址 2.选择一个文件夹，执行npm init。来创建一个符合webpack的项目。完成后，生成一个package.json的文件。 3.webpack安装命令：
webpack入门速学笔记，成长路线
2401_84093310的博客
04-04 717
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
2024年前端最新webpack入门速学笔记，2024年最新2024年字节跳动、阿里等大厂前端面试题
2301_82244509的博客
05-13 846
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
Webpack入门学习（笔记）
weixin_45773503的博客
01-27 241
1. gulp 与 webpack 的区别 gulp更加强调的是前端流程的自动化，模块化不是它的核心。 Webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能，是他附带的功能。 2. 安装 webpack 依赖于 node 环境，node 要用 npm（软件包管理工具） 来管理包 3. 打包 webpack ./src/main.js ./dist/bundle.js 设置webpack.config.js文件可以简化命令行执行语句 const { dirname } = requi
《Webpack实战 入门、进阶与调优》学习笔记
最新发布
Leon_Chenl的博客
05-21 892
Webpack是一个开源的JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件。每个loader本质上都是一个函数。在Webpack4之后，loader同时支持字符串和抽象语法书（AST）的传递。。这里的input可能是工程源文件的字符串，也可能是上一个loader转化后的结果，包括转化后的结果（也是字符串类型）、source map，以及AST对象；
webpack 入门学习 小结（1）
u013117377的博客
08-15 158
webpack 入门学习 小结（1） webpack 是什么1. webpack快速安装2.快速入门 hello.js 简单打包.js文件3.快速入门 style.css 简单打包.css文件 方法-13.1快速入门 style.css 简单打包.css文件 方法-24. webpack 命令小结与扩展总结 webpack 是什么 webpack 是一款打包工具，相比其他打包工具而言，webpac...
webpack 入门学习笔记1
qq_41199601的博客
06-08 138
序章 创建一个空目录，作为本次尝试的demo 首先需要安装webpack以及webpack-cli，这里推荐全局安装，否则会有各种奇怪的问题，十分奇葩。 首先要全局安装这两个东西： npm install webpack -g npm install webpack-cli -g 其次还有在当前目录下局部安装（不是很懂，但是需要，否则后面npm启动时会很麻烦）： npm install webpack --save-dev npm install webpack-cli --save-dev 在当
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
它基于Node.js，通过npm（Node包管理器）安装，可以快速生成项目骨架，自动配置Webpack等构建工具。 Vue-router是Vue的官方路由库，用于管理应用的路由状态，实现页面间的导航。Axios则是一个常用的第三方库，用于...
webpack 零基础入门教程.zip
11-01
通过深入学习和实践本教程提供的"Webpack 3 零基础入门教程"，你将能够熟练地使用Webpack进行项目构建，为现代前端开发打下坚实的基础。无论你是新手还是经验丰富的开发者，这个教程都将帮助你更好地理解和利用...
Web前端入门和进阶学习笔记超详细的前端学习图文教程
08-10
这份"Web前端入门和进阶学习笔记超详细的前端学习图文教程"是为那些希望从零开始，逐步掌握Web前端技术的人准备的宝贵资源。 首先，让我们从基础开始。前端开发的三大核心技术是HTML（超文本标记语言）、CSS（层叠...
webpack的学习复习笔记，包括（webpack使用、webpack配置、webpack服务器等）
weixin_60896381的博客
07-07 689
本文包含 webpack 使用等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（webpack使用、webpack配置、webpack服务器等）
npm出现UNMET DEPENDENCY的一种情况
mus-z的博客
03-26 4987
先用-save-dev方法添加express的框架依赖之后 （详情看菜鸟https://www.runoob.com/nodejs/nodejs-express-framework.html） 使用 npm list查看项目包列表 类似出现这样的错误，但是很奇怪我刚才的express框架文件能够正常运行。（我全局方式安装过） 然后试了试用 npm install xxx再安装本地就消除他的UNME...
【坑】在谷歌浏览器上运行使用了session却失效的坑(Session/cookies/Header-Samesite)
mus-z的博客
01-31 4654
在node服务器上配置了 但是通过谷歌浏览器 每次的cookies都不对劲哦，然后服务器的session失效，不是同一个 百度后发现是谷歌浏览器的防止csrf的措施，会有默认的配置SameSite头 上图中的叹号会提示默认使用了Lax模式，即POST是不允许的 chrome://flags/#site-isolation-trial-opt-out 然后解决就是使用上边的配置地址，去像下图一样去废弃三个默认配置，重启谷歌浏览器 ...
纯css实现的鼠标悬停下拉菜单
mus-z的博客
01-12 4372
参考链接：https://blog.csdn.net/qq_28919991/article/details/82990306 下面是调整后的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css悬停下拉菜单</ti...
es模块的懒加载和预加载（import动态引入+webpack）
mus-z的博客
07-30 3084
此懒加载是js文件的懒加载，不是图片资源的懒加载 很明显test被提前加载了 现在假如有一个需求，当我点击按钮，才想加载test.js 这时候import动态加载就来啦 初始情况为 当我点击按钮 这就实现了es6动态引入的懒加载，因为其实现了代码分割，并不需要担心会重复加载 然后，还有一个东西叫预加载webpackPrefetch console.log('index.js被加载了') document.getElementById('btn').onclick=async function(
用了flex-direction:column;没法对齐
mus-z的博客
02-25 2691
参考：https://www.cnblogs.com/wangshengli520/p/7615501.html .list1 { width: 27%; padding-top: 0.5rem; list-style: none; overflow: hidden; display: flex; flex-direction: column; ...
Webpack入门与安装指南
"Webpack学习笔记是一个详细的指南，介绍了webpack的基本概念、安装方法以及配置过程。主要涵盖以下几个知识点： 1. 模块打包工具： Webpack是一个强大的模块打包工具，它支持两种模块导入规范：ESmodule（如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值