自动化构建工具——4.webpack打包各类资源

最新推荐文章于 2022-04-22 15:24:37 发布
最新推荐文章于 2022-04-22 15:24:37 发布
阅读量163 收藏
点赞数
分类专栏： 自动化构建工具——webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42377203/article/details/106605638
版权

webpack各类资源的打包

将所需要的包下载到根目录，这样在子目录用的时候会自动向上一级找包

一、创建配置文件

项目和配置是两方面，项目的代码用的是ES6模块；而配置模块是基于node.js平台运行的默认采用commonjs。

  • 创建文件 webpack.config.js

  • 基本配置内容如下

/**
 * webpack.config.js  webpack的配置文件
 *  作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）
 * 
 *  所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs。
 */

//  resolve用来拼接绝对路径的方法
const { resolve } = require('path')

module.exports = {
  //  webpack的配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname  node.js的变量，当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细的loader配置
    ]
  },
  // plugins的配置
  plugins: [
    // 详细的plugins配置
  ],
  // 模式
  mode: 'development',    // 以开发模式测试
  // mode: 'production'
}

  • 运行指令: webpack

  • 结论: 此时功能与上节一致

二、打包样式资源

  • 需要配置的部分：loader
  • loader包的使用步骤：
    • 下载
    • 使用（配置loader部分）

2.1 目录结构

|-- 03.打包样式资源   项目根目录
|---- src	           项目源代码目录
|------ index.js       webpacke入口起点文件
|------ index.css  
|------ index.less
|---- build
|-- webpack.config.js  配置文件
  • index.css
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: pink;
}
  • index.less
#title {
  color: red;
}
  • index.js
// 引入样式资源
import './index.css'
import './index.less'

2.2 下载loader包

npm install css-loader style-loader less-loader less -D

2.3 修改配置文件

module部分

// loader的配置
  module: {
    rules: [
      // 详细的loader配置
      // 不同的文件必须配置不同的loader处理
      {
        // 匹配哪些文件
        test: /\.css$/, // 以.css结尾的文件
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上依次执行
          // 创建style标签，将js中的样式资源插入进去，再添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        // 匹配哪些文件
        test: /\.less$/, 
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载less-loader和less
          'less-loader'
        ]
      }
    ]
  },

2.4 运行webpack指令

在这里插入图片描述

2.5 在html页面中引入打包好的js文件

./build/index.html

<body>
  <h1 id="title">hello less</h1>
  <script src="./built.js"></script>
</body>

在这里插入图片描述

三、打包html资源

  • 需要配置的地方：plugins部分

  • plugin使用步骤：

    • 下载html -webpack -plugin包

    • 引入:

      • const HtmlWebpackPlugin = require('html-webpack-plugin')

    • 使用:

      • new HtmlWebpackPlugin()

3.1 目录结构

在这里插入图片描述

3.2 下载安装plugin包

  • 输入指令（在根目录）：npm i html-webpack-plugin -D

  • html -webpack -plugin包功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）

3.3 修改配置文件

/**
 * loader:1.下载 2.使用（配置loader）
 * plugins：1.下载   2.引入   3.使用
 */

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    // plugins配置
    // html -webpack -plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制'./src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode:'development'
}

3.4 运行webpack指令

在这里插入图片描述

可以在./build目录下看到左右打包好的文件=
在这里插入图片描述
浏览器运行./build/index.html
在这里插入图片描述

四、打包图片资源

  • 需要配置的地方：module部分
  • 需要的loader包：
    • url-loader：处理图片资源，但默认处理不了html中的img图片
    • file-loader：url-loader所需
    • html-loader：处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）

使用url-loader包时存在的问题：因为url-loader默认使用ES6模块化解析，而html-loader引入图片是commonjs解析时会出问题

解决：关闭url-loader的ES6模块化，使用commonjs解析

4.1 目录结构

在这里插入图片描述
index.html

<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
</body>

index.less

#box1 {
  width: 100px;
  height: 100px;
  background-image: url('./1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
 
#box2 {
  width: 200px;
  height: 300px;
  background-image: url('./2.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#box3 {
  width: 300px;
  height: 400px;
  background-image: url('./3.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

index.js

import './index.less'

4.2 下载安装 loader 包

  • 输入指令（在根目录）：npm i url-loader file-loader html-loader -D

4.3 修改配置文件

const { resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        // 问题：默认处理不了html中的img图片
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载 url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于10kb，就会被base64处理（8~12kb)
          // 优点：减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 10 * 1024,

          /**
           * 问题：因为url-loader默认使用ES6模块化解析，而html-loader引入图片是commonjs
           * 解析时会出问题：[object Module]
           * 解决：关闭url-loader的ES6模块化，使用commonjs解析
           */
          esModule: false,
          // 给图片重命名
          // [hash: 10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    // plugins配置
    // html -webpack -plugin
    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制'./src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

4.4 运行webpack指令

在这里插入图片描述

可以在./build目录下看到左右打包好的文件
在这里插入图片描述

浏览器运行./build/index.html
在这里插入图片描述

五、打包其他资源

不需要进行任何处理，只需原封不动的输出出去的资源统一称为其他资源。

  • 需要的loader包：file-loader（之前已经安装过）

5.1 目录结构

在这里插入图片描述

5.2 修改配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源（除了html/js/css/less资源以外的资源）
      {
        // 排除css/js/html/less资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

5.3 运行webpack指令

在这里插入图片描述

可以在./build目录下看到左右打包好的文件
在这里插入图片描述

浏览器运行./build/index.html
在这里插入图片描述

六、devserver——自动编译

  • 概念：每修改一次项目代码就要重复执行一次webpack打包操作，为了减少这种麻烦的操作，提出了开发服务器——devserver，用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）

  • 特点：只会在内存中编译打包，不会有任何输出

  • 需要下载的包：

    npm i webpack-dev-server -D

  • 启动devserver指令为：

    npx webpack-dev-server

6.1 目录结构

在上以内容的目录结构基础上修改、配置

index.js

// 引入iconfont样式资源
import './iconfont.css'

function add(x, y) {
  return x + y
}

console.log(add(2, 3))

index.html

<body>
  <span class="iconfont icon-icon-test"></span>
  <span class="iconfont icon-icon-test1"></span>
  <span class="iconfont icon-icon-test2"></span>
  <span class="iconfont icon-icon-test3"></span>

  <div>hello webpack</div>
</body>

6.2 下载安装devserver包

npm i webpack-dev-server -D

在这里插入图片描述

6.3 修改配置文件

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 打包其他资源（除了html/js/css/less资源以外的资源）
      {
        // 排除css/js/html/less资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',

  // 开发服务器 devserver：用来自动化（自动编译、自动打开浏览器、自动刷新浏览器）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devserver指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后路径
    contentBase:resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true 
  }
}

6.4 启动devserver指令

在这里插入图片描述

运行./build/index.html
在这里插入图片描述

修改项目代码并保存后，会自动将最新的内容打包

yoliu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ppt课件-第10章 使用webpack.zip
03-22
这个标题表明内容聚焦于Web开发中的一个重要工具——Webpack，这是一款强大的模块打包器，常用于JavaScript应用的构建过程。"第10章"暗示这可能是某个系列教程的一部分，意味着它可能在讲解了一些基础概念后，深入到...
Vue基础知识总结 9：vue webpack打包原理
学Java，找哪吒
10-06 2万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化 webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。 并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。 二、打
Webpack详细教程
qq_42453562的博客
08-25 1420
webpack第 1 章：webpack 简介1.1 webpack 是什么1.2 webpack 五个核心概念1.2.1 Entry 入口(Entry)1.2.2 Output 输出(Output)1.2.3 Loader1.2.4 Plugins1.2.5 Mode第 2 章：webpack 的初体验2.1 初始化配置三级目录第 3 章：webpack 开发环境的基本配置第 4 章：webpack 生产环境的基本配置第 5 章：webpack 优化配置第6 章：webpack 配置详情第 7 章：web
webpack4打包实战
woyebuzhidao321的博客
02-17 3889
一、模块化打包工具的由来 ES Module存在环境兼容问题，通过模块化方式划分的模块较多，网络请求频繁，在前端应用开发中不仅仅需要JavaScript代码需要模块化，随着应用的日益复杂，html，css同样也面临相同的问题，也就是说，所有的前端资源都需要模块化。 所需要的工具需要满足的条件： 新特性代码编译 模块化JavaScript打包 支持不同文件类型的资源模块 打包工具：解决前端整体的模块化，并不单指JavaScript模块化 二、模块打包工具概要 核心： 模块打包器（Module bund
如何使用Webpack打包
weixin_47316183的博客
04-22 1万+
简单的说了一下webpack是干嘛的，和webpack如何安装，如何进行打包，步骤很详细，感兴趣的同学可以试着操作一下。 文章目录1、webpacks是什么？2、Webpack安装3、初始化项目4、使用webpack进行JS打包5、使用webpack进行CSS打包总结 1、webpacks是什么？ Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、le.
webpack-开发环境-打包其他资源
肖帅的博客
03-24 292
webpack-开发环境-打包其他资源 1，创建文件 2，修改webpack.config.js 主要使用exclude关键字，代码如下 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src...
gulp打包及发布静态资源流程
08-10
总结，`gulp`是一个强大的静态资源管理和构建工具，通过编写简单任务脚本，可实现代码编译、压缩、合并、发布等一系列自动化流程。`gulp-package-hugin-demo-master`项目就是一个很好的学习案例，通过阅读和实践，你...
webpack—-js的静态模块打包器
01-08
设置输出(output)属性指定了webpack打包后的文件路径和命名规则，例如： ```javascript module.exports = { entry: './src/lib/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: '...
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
总的来说，vue-cli帮助开发者快速搭建了一个具备基础功能的VueWebpack项目，包括模块化构建、热加载开发环境、路由管理、静态资源处理等。随着项目的深入，还可以自定义webpack配置，添加本地mock数据支持，以满足更...
这是一个超小的例子透明地比较了parcel和webpack
08-10
本示例透明地比较了两个流行的打包工具——Parcel和Webpack，让我们深入探讨这两个工具的核心特性和差异。 Parcel，被誉为“零配置”的打包工具，其设计理念是提供开箱即用的体验。当你创建一个新的项目并尝试运行`...
Webpack(01)-打包各类资源
weixin_47723644的博客
10-28 657
webpackwebpack五大模块webpack的使用 webpack五大模块 entry: 打包入口文件，入口文件引用了a文件和b文件，a、b文件又引用了其他文件，这样一层层调用，会将项目中用到的文件生成一个树状的结构图。 output： 打包资源输出位置，指定打包好的资源输出到哪里，如何命名 loader： webpack只能够处理js，json文件，css、img文件需要通过loader翻译成可以处理的文件 plugin： 插件，可以做一些执行范围更广的任务，如代码压缩 mode： (1).de
iOS自动化打包工具
--的博客
04-11 796
#需要编译的 targetName TARGET_NAME="dabao2" #编译模式 工程默认有 Debug Release  CONFIGURATION_TARGET=Release echo "~~~~~~~~~~~~~~~~开始构建~~~~~~~~~~~~~~~~~~~" #开始构建 xcodebuild -project ${TARGET_NAME}.xcodepr
（三）webpack打包其他资源以及优化
m0_50744582的博客
09-22 293
1.处理css的兼容性 需要使用postcss处理，下载两个包：npm i postcss-loader postcss-preset-env -D
2、webpack配置文件之—打包各种资源及文件
BWater_monster的博客
02-17 1262
webpack配置文件之—打包各种资源及文件
使用Jenkins实现自动化打包
Charon_Chui的专栏
05-30 2万+
使用Jenkins实现自动化打包 Jenkins个开源的持续集成工具，不仅可以用来进行Android打包，也可以用来进行iOS打包、NodeJs打包、Java服务打包等。 The leading open source automation server, Jenkins provides hundreds of plugins to support building, deployin...
教你如何使用webpack打包你的项目
热门推荐
u012631731的博客
06-25 8万+
webpack是前端开发中比较常用的打包工具之一，另外还有gulp，grunt。之前没有涉及过打包这块，这里介绍一下使用webpack打包的流程。
webpack-03打包其他的资源
weixin_46058038的博客
04-13 64
1，打包其他的资源(字体图标等) 图标的资源 在html中引入对应的图片和图标的文件 注: 对应的文件引入不可少 在js中引入打包样式文件 再webpack中配置结构 webpack运行 效果 2，减少重复进行打包的操作，进行自动编译配置 引入包 npm i webpack-dev-server -D 配置对应的结构 运行 命令 npxx webpack-dev-server ...
WebPack打包
学渣的博客
07-29 991
一、用webpack打包 新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） 2.安装webpack $ npm install webpack --save-dev （生成node_modules文件夹） 3. 在webpack-demo下面新建一个hello.js文件 function...
webpack 保存文件后自动打包_细说前端自动化打包工具--webpack
weixin_42284052的博客
12-23 259
背景记得2004年的时候，互联网开发就是做网页，那时也没有前端和后端的区分，有时一个网站就是一些纯静态的html，通过链接组织在一起。用过Dreamweaver的都知道，做网页就像用word编辑文档一样。一个html页面，夹杂着css,javascript是再常见不过的事了。随着前端的不断发展，特别是单页应用的兴起，这种所见即所得的IDE工具，就渐渐地退出了前端的主流。一个应用，通常只有一个静态页...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值