webpack基本配置及使用

最新推荐文章于 2024-06-02 17:32:03 发布
最新推荐文章于 2024-06-02 17:32:03 发布
阅读量240 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itsxyu/article/details/100061675
版权

1.node下载

首先需要本地下载好node.js，安装好后就自动生成npm（包管理器）

  1. 下载地址https://nodejs.org/en/
  2. 检查安装，window+r—>cmd—>输入node -v可以查看安装版本，显示则表示安装成功，
  3. 测试npm，npm -v
  4. 建议在安装cnpm,npm是国外版，cnpm是国内版，所以安装包时，cnpm速度更快，且有些包只能cnpm安装，比如sass

2.安装webpack的两种方式

  1. npm i webpack -g全局安装webpack
  2. 在项目根目录运行npm i webpack --save-dev安装到项目依赖中

注意：

  • 在4.0+版本中，除了安装webpack，还需安装webpack-cli才能运行npm i webpack-cli -g
  • 检查安装成功 webpack -v

3.初步使用webpack打包列表隔行变色案例

  1. 建立文件夹名为webpack,打开vscode–>查看–>调试控制台–>终端
  • npm init初始化项目，使用npm管理项目中的依赖包，一直回车，结束后，项目下生成package.js文件

在这里插入图片描述

  • 创建项目基本的目录结构，dist为项目发行时的文件夹，src放images/js/css等源代码开发文件
    在这里插入图片描述
    index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
        <li>第6个li</li>
        <li>第7个li</li>
        <li>第8个li</li>
        <li>第9个li</li>
        <li>第10个li</li>
    </ul>
</body>
</html>

main.js

import $ from 'jquery'
$(function(){
   $("li:odd").css("backgroundColor","red");
})
  • 安装jQuery库 npm i jquery -s
  • 使用webpack .\src\main.js .\dist\bundle.js
    即webpack 入口文件 出口文件可能无法生成bundle.js文件到dist目录下，
    在这里插入图片描述
  • 解决：使用新配置文件来重新构建。在项目下新建webpack.config.js文件，在文件中写入入口文件和输出文件,
    在这里插入图片描述
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src/main.js'),//代表入口文件
output: {
path: path.join(__dirname, 'dist'),//输出位置
filename: 'bundle.js'//代表输出文件
}
}

*保存好文件webpack.config.js后，终端输入webpack或者npx webpack --config webpack.config.js，dist目录下生成bundle.js文件
在这里插入图片描述

  • index.html中加入，打开页面可以看到实现了列表隔行变色
<script src="../dist/bundle.js"></script>

在这里插入图片描述

4.webpack-dev-server的基本使用

问题：每次改变main.js中的代码（如.css中的背景色）都必须重新输入webpack命令才能执行新代码，
解决：使用webpack-dev-server自动打包编译的功能

  1. 运行npm i webpack-dev-server -D 把这个工具安装到本地依赖开发
  2. 安装完后，这个工具的用法和webpack的用法完全一样，运行webpack-dev-server会报错，因为我们是在项目中本地安装的webpack-dev-server，所以无法把它当做脚本命令在项目终端中直接运行，只有安装到全局 -g 的命令才能正常执行
  3. 解决：在package.json 中配置要运行的命令.注意json中不能写注释
    在这里插入图片描述
  4. 在终端中直接运行 npm run dev报错，解决：删除node_modules文件夹，然后再npm i
  5. webpack-dev-server如果想要正常运行，要求在本地项目中安装webpack，npm i webpack -D
  6. 最后npm run dev可以实现动态编译
  7. 此时发现提供了一个端口，也可点击进入页面
    在这里插入图片描述
  8. 但是发现页面并没有改变，因为webpzck-dev-server帮我们打包的bundle.js并没有存放到实际的物理磁盘中，而是直接托管到电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的bundle.js
  9. 我们可以认为，webpack-dev-server把打包好的文件一一种虚拟的方式托管到了项目根目录中，虽然看不到但是与dist ,src平级，叫做bundle.js。做法：删除dist目录下的bundle.js,将index.html的script路径改为 /bundle.js
    10.点击终端中的http://locahost:8080/链接可以看到页面发生改变，注意：直接打开页面看不到改变

5.webpack-dev-server的常用命令参数

问题：每次要打开浏览器都要点击终端中的链接
解决：package.json加入dev参数，浏览器自动打开.

"dev": "webpack-dev-server --open --port 3000 --contentbase src --hot"
  • - -open：修改main.js保存后，自动打开页面
  • - -port 3000：修改打开的页面端口号为3000
  • - -contentbase src：打开浏览器直接进入src下的index.html页面
  • - -hot：热更新。局部刷新bundle.js，减少页面刷新请求
    注意：每次修改完参数，要重新运行 npm run dev

6配置处理css样式表的第三方loader

  1. src下新建css文件夹下面新建index.css文件
  2. 问题：将css文件直接引入index.html会造成二次请求，不推荐使用。
  3. 在main.js中使用import语法导入css样式表。
import './css/index.css'
  1. 问题：导入之后发现编译错误，原因是webpack，默认只能打包处理js类型的文件
  2. 解决：手动安装第三loader加载器。npm i style-loader css-loader -D
  3. 打开webpack.config.js这个配置文件，新增一个配置节点，叫做module，在module对象上有一个rules属性，这个rules属性是一个数组，这个数组中存放了所有第三方文件的匹配和处理规则
module:{
     rules:[
         {test:/\.css$/,use:['style-loader','css-loader']}
        ]
 }

7.url-loader的使用

问题：默认情况下，webpack无法处理css中的图片和字体库，只要带url

处理图片

  1. cnpm i url-loader file-loader
  2. webpack.config.js添加配置。
  • limit给定的值是图片的大小，如果引用的图片大于或等于给定的limit值则不会被转为base64格式的字符串，如果小于，则会被转为base64的字符串
  • &name=[name].[ext]：图片名称原样输出
  • [hash:8]-：hash值一共有32位，输出前8位，避免两张重名图片输出。
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=25735&name=[hash:8]-[name].[ext]'}

处理字体图标

  1. index.html
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
  1. cnpm i bootstrap -S
  2. main.js
import 'bootstrap/dist/css/bootstrap.css';
  1. webpack.config.js
 {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}

8.babel的配置

问题：在webpack中，默认只能处理一部分es6的新语法，一些更高级的语法处理不了，这时候就要借助第三方的loader，来帮助webpack处理高级语法，当loader把高级语法转为第几语法后，会把结果交给webpack打包到bundle.js 中

  1. 第一套包cnpm i babel-core babe-loader babel-plugin-transform-runtime -D
  2. 第二套包 cnpm i babel-preset-env babel-preset-stage-0 -D
  3. 打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
  1. 在项目的根目录中，新建一个叫做 .babelrc 的babel配置文件，这个配置文件属于json格式，所以不能写注释，字符串必须用双引号
  2. 在.babelrc中写如下的配置
{
	"presets":["eve","stage-0"],
	"plugins":["transform-runtime"]
}
itsxyu
关注
专栏目录
webpack基本配置
码农专栏
06-21 303
概念 对于刚接触webapck的同学来说，可能首先要想知道的是webpack是什么，它能做什么 对于这个问题，webpack的官网给我们的答案： 本质上，webpack是一个现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个bundle 核心 webpack的核心有四个 entry 入口 output 输出 loader ...
一、Webpack基本配置及使用
hxing1923439601的博客
03-30 121
一、Webpack基本配置及使用 1、安装本地Webpack webapck webpack-cli -D // -D 表示上线不需要打这个包 // 初始化一下，记录安装的依赖 yarn init -y // 5.2支持的npx语法可以直接执行webpack // 默认去找node_modules下面的bin文件里面的webpack.cmd npx webpack 2、 Webpack可以0配置 打包工具 -> 输出后的结果(js模块) 打包 -> 支持js模块化 // 执行这行命令，
Webpack中的基本配置
D-的博客
01-14 6759
此节内容我们要对 webpack 的五大基本配置做一些了解。
webpack的基础配置
小傲哥哥的博客
03-28 339
前言：webpack作为现在前端最主流的打包工具，几乎成为了前端开发必会的东西了。今天就来说一说webpack最基础的配置把 1、webpack的安装 全局安装： npm install webpack webpack-cli -g 意思是同时全局 安装webpack 和webpack的脚手架，这样会默认下载webpack的最新版本。 本地安装：npm install webpack ...
webpack 基本配置
最新发布
m0_71033433的博客
06-02 966
开发模式就是我们开发代码时使用的模式。webpack 本身是不能识别样式资源的，所以我们需要借助 loader 来帮助 webpack 解析样式资源。我们找 loader 都应该去官方文档中找到对应的 loader， 然后使用css-loader：负责将 css 文件编译成 webpack 能识别的模块；：会动态创建一个 style 标签，里面放置 webpack 中 css 模块内容；此时样式就会以 style 标签的形式在页面上生效。
webpack的基本配置
yanzhi的博客
02-25 270
转眼春节之后已经快要开工一个月了，还记得春节期间给自己定下的一个小目标，在2017年要学会react相关的技术。其实2016年我已经对react开发有所实践，但是总觉得似懂非懂。所以开了博客来梳理一下。我也是查看了很多大神的博客，慢慢摸索总结得出以下内容，不完善之处，恳请各位大神斧正。 工欲善其事，必先利其器。我先从webpack配置开始梳理。 首先当前项目目录结构是这样的： -|app
webpack基本配置案例
08-10
在这个"webpack基本配置案例"中，我们将深入理解Webpack的核心概念和基础配置。 首先，Webpack 的核心思想是"一切都是模块"，它通过加载器（Loader）将不同类型的文件转换为JavaScript模块，然后通过插件（Plugin）...
webpack 的基本使用及配置
两个月亮
01-12 789
html-webpack-plugin 插件可以自动地将某个路径下的文件复制到其他路径下，该文件并不会存在于物理磁盘中，在 webpack 运行过程中，该文件都将暂存于内存中，在 webpack 停止运行时，将该文件写入物理磁盘（复制的文件中所发生的修改在 webpack 中止运行后将写入原文件中）中。在对 webpack 进行配置之前，需要在项目根目录下新建 webpack 配置文件，该文件的名称为。在 webpack 结束运行前，打包后的文件都将存储在内存中，可以在项目文件根目录中访问到该文件。
webpack的基本原理及手动配置webpack的详细步骤
07-03
以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，webpack中的loader，打包发布，Source Map以及在浏览器中安装vue-devtools调试工具。...
webpack基本的配置
读心悦
07-06 3369
现在的前端，出现很多种可以提高开发效率的工具和框架，但是源码却不能直接运行，只有通过转换之后才能正常运行。那么构建就是把源码转化为可以执行的JavaScript、HTML和CSS代码。
webpack-第一集
come from h5
09-20 390
初识webpack 文档 官网网站：https://webpack.js.org/ 1.webpack简介 webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中。 是工程化、自动化思想在前端开发中的体现 2、安装webpack 2.1 - 环境准备 nodeJs https://nodejs.org/en/ 版本参考官网发布的最新版本，可以提高webpack的打包速度 2.2
webpack的基本配置和使用
weixin_46659420的博客
05-27 104
webpack的基本配置和使用 安装打包html的插件 npm i html-webpack-plugin -D webpack.config里对应的插件代码 plugins:[ //默认会创建一个空的，目的是自动引入打包的资源 new htmlWebpackPlugin({ template:"./src/index.html", filename:"index.html" }), new miniCssExtractPlugin({ }) ], 对js语法配置通过
使用webpack3.0配置webpack-dev-server教程
08-27
使用webpack3.0配置webpack-dev-server教程 本文主要介绍使用webpack3.0配置webpack-dev-server的教程，旨在帮助读者快速搭建一个小型的服务器。下面我们将详细介绍webpack-dev-server的配置和原理。 一、webpack-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值