webpack初体验_集成插件_集成loader

最新推荐文章于 2024-09-15 07:31:49 发布
最新推荐文章于 2024-09-15 07:31:49 发布
阅读量114 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1697752105/article/details/102851431
版权

webpack初体验

  1. 如果没装 webpack 就先装一下,命令行输入npm i webpack -g
  2. 新建一个项目 在这里插入图片描述
  3. 创建一个空的项目 在这里插入图片描述
  4. 定义一个名称 在这里插入图片描述
  5. 创建一个Module 在这里插入图片描述
  6. 选择静态 web 在这里插入图片描述
  7. 输入名称在这里插入图片描述
  8. 输入 npm init -y 在这里插入图片描述
  9. 在Module下新建两个目录 dist 和 src ,并且在src 下 新建 index.html 与 main.js在这里插入图片描述
  10. index.html 内容为
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
  1. main.js 内容为
console.log("webpack初体验");
  • 执行 npm i webpack-dev-server -S
  • 执行 npm i webpack -S
  • 执行 npm i webpack-cli -S 在这里插入图片描述
    在这里插入图片描述
  1. 在Module下新建文件 webpack.config.js 内容为
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
        path: path.join(__dirname, "./dist"),//输出路径
        filename: "bundle.js"//执行输出文件的名称
    }
};

在这里插入图片描述

  1. 执行 npm run dev 在这里插入图片描述

  2. 如果有打印 就表示成功了~!!! 在这里插入图片描述

    webpack集成 html-webpack-plugin

  3. 执行 npm i html-webpack-plugin -S在这里插入图片描述
  4. 在 main.js 中添加 console.log("webpack集成html-webpack-plugin"); 在这里插入图片描述
  5. 在 webpack.config.js 中添加
//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");
  1. 在 webpack.config.js 中 output 后添加 , 之后添加
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
            filename: "index.html"//设置内存中页面名称
        })
    ]
  1. 现在的 webpack.config.js 内容为在这里插入图片描述
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");

//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
        path: path.join(__dirname, "./dist"),//输出路径
        filename: "bundle.js"//执行输出文件的名称
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
            filename: "index.html"//设置内存中页面名称
        })
    ]
};
  1. 这时候就可以删除 index.html 中的 script 引入 在这里插入图片描述

  2. 执行 npm run dev 在这里插入图片描述

    webpack集成 style-loader 和 css-loader

  3. 执行 npm i style-loader css-loader -S 在这里插入图片描述
  4. 在 src 目录下 新建 css 目录,在 css 目录下新建 index.css 文件,内容为
body
{
    background: gray;
}

在这里插入图片描述

  1. 在 main.js 中添加console.log("webpack集成 load之style-loader css-loader"); 和 import "./css/index.css" ,添加之后的内容为
console.log("webpack初体验");
console.log("webpack集成html-webpack-plugin");
console.log("webpack集成 load之style-loader css-loader");

import "./css/index.css"
  1. 在 webpack.config.js 中 plugins 后添加 , 再添加
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
        ]
    }

在这里插入图片描述

  1. 添加后的内容为
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");

//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");

//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
        path: path.join(__dirname, "./dist"),//输出路径
        filename: "bundle.js"//执行输出文件的名称
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
            filename: "index.html"//设置内存中页面名称
        })
    ],
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
        ]
    }
};
  1. 执行 npm run dev 在这里插入图片描述

webpack 集成 less-loader

  1. 执行 npm i less-loader less -S 在这里插入图片描述
  2. 在 webpack.config.js 中添加匹配规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

3.添加之后内容为 在这里插入图片描述

webpack集成 sass-loader

  1. 执行 npm i sass-loader node-sass -S 在这里插入图片描述
  2. 在 webpack.config.js 中添加匹配规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },

  1. 添加之后内容为 在这里插入图片描述

    webpack集成 url-loader 和 file-loader

  2. 执行 npm i url-loader file-loader -S
  3. 在 index.html 的 body 标签中添加 <div class="diy01"></div> 在这里插入图片描述
  4. 在 css 目录下的 index.css ,添加
.diy01
{
    width: 320px;
    height: 214px;
    background-color: aquamarine;
}
  1. index.css 此时的效果是 在这里插入图片描述
  2. 执行 npm run dev 发现修改的内容已经成功了 在这里插入图片描述
  3. 在 src 下创建目录 images 放入一张图片 在这里插入图片描述
  4. 把 index.css 的 .diy01 修改为
.diy01
{
    width: 320px;
    height: 214px;
    background: url("../images/daniu.jpg");
    background-size: cover;
}
  1. 修改后的内容为 在这里插入图片描述
  2. 在 webpack.config.js 中添加匹配规则
{test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},
  1. 添加后 webpack.config.js 匹配规则内容为 在这里插入图片描述

  2. 执行 npm run dev 在这里插入图片描述

    webpack集成 bootstrap

  3. 执行 npm i bootstrap@3 -S
  4. 在 index.html 的div 标签下添加
<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>

在这里插入图片描述

  1. 在 main.js 中添加
/*import "../node_modules/bootstrap/dist/css/bootstrap.css"*/
/*node_modules中的可以省略*/
import "bootstrap/dist/css/bootstrap.css"

在这里插入图片描述

  1. 再把 package.json 中的 "dev" 修改为,删除了 --contentBase src

    "dev": "webpack-dev-server --open --port 2198 --hot"

    在这里插入图片描述

  2. 在 webpack.config.js 中添加匹配规则
//处理字体文件的loader,bootstrap小图标就是使用这个
{test:/\.(eot|svg|ttf|woff|woff2)$/,use:'url-loader'},

在这里插入图片描述

  1. 执行 npm run dev 显示心形小图标 在这里插入图片描述

    webpack集成 babel-loader

  2. 执行以下命令,因为babel-loader默认安装8,不支持,所以指定版本7

    npm i babel-core babel-loader@7 babel-plugin-transform-runtime -S
    npm i babel-preset-env babel-preset-stage-0 -S

  3. 在 main.js 中添加
class Student
{
    static stu_info = {name: "大牛", age: "18"}
}

console.log(Student.stu_info);

在这里插入图片描述

  1. 在根目录 创建文件 .babelrc 内容为
{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

在这里插入图片描述

  1. 在 'webpack.config.js' 中添加匹配规则
// 配置 babel-loader 来转换高级的ES语法
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},

在这里插入图片描述

  1. 执行 npm run dev 在这里插入图片描述
陶攀峰
关注
umi 如何配置webpack_umi 框架 如何配置 自定义 插件 和 loader
weixin_39835117的博客
12-21 1896
一 准备工作umi 为 react 的一个封装比较nice的脚手架。优点当然就是 安装方便，开箱即用，集成了诸多好用功能，详见 官网。 当然 缺点就是 无法暴露原始的webpack.config.json 文件，只能按照官方文档上特定的方法进行修改，而文档却并不完善。项目顺利进行大家笑嘻嘻，一旦遇到偏难怪需求，要改变webpack配置了，大家哭唧唧。 从此踏上踩坑之路，骚年。 (ps：自己还是喜欢...
webpack原理与实践
Garbrielle的博客
03-02 847
webpack
Webpack之Loader原理及自定义Loader
scorpio的博客
06-20 3117
Webpack之Loader原理及自定义Loader
vuex webpack 配置_webpack搭建vue环境报错
weixin_42589700的博客
01-12 139
今天用webpack手动搭建环境的时候，疯狂报错，好大会都进行不了下一步首先是配置package.json//自动配置npm init -y一切都没有任何问题然后安装webpack工具npm install webpack webpack-cli --save-dev//或者是npm i webpack webpack-cli -D也可以运行webpack测试这一步的时候 我在命令行上敲出webp...
Django Webpack Loader：简化Django与Webpack的集成
gitblog_00316的博客
09-15 739
Django Webpack Loader：简化Django与Webpack的集成 django-webpack-loader Transparently use webpack with django 项目地址: https:/...
推荐：高效集成EJS模板的Webpack插件——`ejs-loader`
gitblog_00066的博客
06-10 475
推荐：高效集成EJS模板的Webpack插件——ejs-loader ejs-loader项目地址:https://gitcode.com/gh_mirrors/ejs/ejs-loader 在前端开发领域，将模板引擎与构建工具无缝整合能极大地提升开发效率和维护性。如果你正寻找一个能够将EJS（Embedded JavaScript）模板与Webpack完美结合的解决方案，那么ejs-loade...
webpack基础配置及常用loader
qq_40289557的博客
07-10 676
webpack基础配置及常用loader
webpack 打包（plugin、loader 工作原理）
雪急飞绪博客
05-07 1475
模块化工具 由来 ES Modules 存在环境兼容问题 模块文件过多，网络请求频繁 所有的前端资源都需要模块化 概要 Webpack 作为 模块打包器（Module bundler），可以把零散的文件打包到一个 JS 中，对于有环境兼容的代码可以在打包过程中通过 模块加载器（Loader） 对其进行编译转换 Webpack 还具备 代码拆分（Code Splitting） 能力，将应用中所有代码按照我们的需要进行打包，这样就可以渐进式加载，不会导致文件过碎或过大 Webpack 支持以模块化
webpack打包
chenacxz的博客
04-08 428
webpack打包webpack打包打包工具模块打包工具webpack使用上手配置文件工作模式打包结果运行原理资源模块加载导入资源模块文件资源加载器data url,url加载器加载器分类 webpack打包 打包工具 模块化解决了我们开发过程中的代码组织问题 但是模块化依然存在一些问题 1、EsModules存在环境兼容问题 2、模块文件比较多，网络请求频繁 3、所有的前端资源都需要模块化 所以模块化是必要的，但是也要解决对生产环境的影响 需要一个工具编译对应的代码，转换为兼容绝大多数环境的代码 将散落
webpack_make_library
02-13
Webpack 配置文件（通常是 `webpack.config.js`）定义了输入、输出、加载器（loaders）和插件（plugins）等关键设置。 1. **输入与输出**：在配置文件中，你需要指定入口文件（entry），这是 Webpack 开始处理的...
webpack:学习Webpack:man_running::man_running:
03-07
Webpack 接受输入的模块（包括JavaScript文件和其他静态资源），通过加载器（Loader）将非JavaScript文件转换为JavaScript模块，再通过插件（Plugin）进行进一步的处理，如优化、压缩等。最后，Webpack 会生成一个或...
curso_webpack5_platzi
03-11
6. **更好的TypeScript支持**：Webpack 5与TypeScript的集成更加紧密，为使用TypeScript的项目提供了更好的构建体验。 7. **资源索引**：引入了预构建的资源索引，可以更快地解析和识别模块。 在"curso_webpack5_...
如何手动搭建webpack，集成Vue
01-08
3. loader:资源转换器 4. plugin:插件 5. mode:模式 还有其他的打包压缩工具： grunt：https://www.gruntjs.net/ gulp：https://www.gulpjs.com.cn/ fis3(百度)：http://fis.baidu.com/ webpack：...
开题报告SpringBoot家具商城系统.docx
最新发布
11-02
毕业设计开题报告
Flask-2.2.3-py3-none-any.zip
11-02
Flask-2.2.3-py3-none-any.zip
编译器前端与后端设计.docx
11-02
编译原理试题
google-2.0.1.tar.gz
11-02
google-2.0.1.tar.gz
1Python 3 介绍（十五）-- Python函数.docx
11-02
1Python 3 介绍（十五）-- Python函数.docx
天气图绘制的相关nc数据与shp
11-02
天气图绘制的相关nc数据与shp ①绘制中国地图的shp，省界国界 https://docs.gmt-china.org/latest/dataset-CN/CN-border/ ②500hpa、1000hpa（地面）天气图的相关数据 高度层：https://cds-beta.climate.copernicus.eu/datasets/reanalysis-era5-pressure-levels?tab=download 地表：https://cds-beta.climate.copernicus.eu/datasets/reanalysis-era5-single-levels?tab=overview
手动搭建Webpack与Vue集成指南
集成Vue到Webpack项目中，通常需要安装Vue的加载器和插件，例如`vue-loader`和`vue-template-compiler`，并在Webpack配置中指定Vue的处理规则。这样，Webpack 就能正确解析和打包Vue组件，使项目能够在浏览器中运行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值