Webpack打包(二)

最新推荐文章于 2024-05-13 16:20:19 发布
最新推荐文章于 2024-05-13 16:20:19 发布
阅读量128 收藏
点赞数 1
分类专栏： Webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_u_c_k_y_m_a_n/article/details/117819640
版权

Webpack打包

一. 处理昨天的执行命令权限不够问题

        我们昨天在执行打包命令时,在 vscode 中会出现报错的问题,我们先来看一下在 vscode 中的报错信息
在这里插入图片描述
        对于这个问题我特意去搜了,这是因为执行权限不够的原因造成的,我们有两种解决办法,但都是基于 cmd 窗口去解决的,有两种执行 cmd 窗口的方法

        1. 在 vscode 中打开 cmd 执行命令

                我们在 vscode 最顶层选项中中打开终端,下面会弹出终端执行窗口.在这个小窗口的最右上角有 “+”     “^” 和 “X” ,点击 加号那一块的 “^” 按钮,然后出现下拉选项框,选中 Command Prompt(也就是cmd),然后再执行 webpack ./src/index.js -o build --mode=development 命令就可以成功执行.我这里是配置了所以用的 webpack. 不用考虑第二张图的报错,那是因为我引入了 一会学习的打包 less样式,是可以打包成功的,

在这里插入图片描述

在这里插入图片描述

        2. 直接打开 cmd 执行命令

                打开你这个文件,在文件路径中输入cmd,打开cmd窗口,然后执行命令

在这里插入图片描述

在这里插入图片描述

二. 环境配置

        二.1. 创建文件

                在配置 webpack 时,我们需要在src同级目录下创建一个以 webpack.config.js 命名的文件

在这里插入图片描述

        二.2. 配置

                我已经做了详细的注释,可以方便理解

/*  webpack.config.js   是 webpack 的配置文件
    作用: 指示 webpack 干哪些工作 (当你运行 webpack 指令时,会加载里面的配置)

    所有构建工具都是基于 nodejs 平台运行的 模块化默然采用 commonjs

	要执行的命令 :
		npm init  // 初始化
*/ 

// 引入 nodejs 的一个模块   resolve 用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    // webpack 配置
    // 入口
    entry:'./src/index.js',

    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
            // __dirname nodejs的变量,代表当前文件目录的绝对路径 
        path: resolve(__dirname,'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细的loader配置
            // 不同文件必须配置不同loader处理,
         ]
    },
    // plugins的配置
    plugins:[
        // 详细的plugins的配置
    ],
    // 模式
    mode: 'development', // 开发环境  尽量使用开发环境去测试,因为生产环境会压缩文件,我们看不懂
    // mode: 'production', // 生产环境
}

        二.3. 执行命令

                在我们配置完之后,我们直接输入 webpack 命令就可以进行打包了,不用打那么长的命令,执行起来非常方便.打包完之后,build不会像昨天那样没有配置 会打包为 main.js. 在我们配置完之后,会生成 built,js 打包文件

三. 打包css样式

        三.1. 创建文件

                我们在 src 目录下创建两个文件,一个是 css 文件,一个是 index.js 入口文件.
在这里插入图片描述

        三.2. 编写文件

                三.1.1 index.css 文件

#title {
  color: aqua;
}

                三.1.2 index.index 入口文件

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

        三.3. 配置环境

                在 webpack.config.js rules添加配置

{
                // test 常用正则表达式  匹配哪些内容 
                test: /\.css$/, // loader会处理以.css为结尾的文件

                // 使用哪些loader进行处理
                use:[
                    // 处理样式文件
                    // use数组中loader进行处理顺序: 从右到左,从下到上 依次执行
                    // 创建style标签,将js中的样式资源插入进行,添加到head中生效
                    'style-loader', 
                    // 将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },

        三.四. 安装 css-loader 和 style-loader

npm i webpack webpack-cli -D // 必须要下载的 webpack cli
npm i css-loader style-loader -D // 将 css-loader 和 style-loader 一起下载

        三.五. 打包

webpack // 因为我们配置过,所以直接 webpack 就可以打包

        三.六. 引入

                我们在 build 中新建 index.html 文件,然后引入打包文件 built.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./built.js"></script>
</body>
</html>

        三.七. 打开浏览器

                我们引入完毕之后,就打开浏览器,我们就会发现我们成功了
在这里插入图片描述

四. 打包less样式

        四.1. 安装 less

                如果你的 vscode 没有安装 less,那我们就去应用商店下载一个,进行安装. 我这个是安装过的
在这里插入图片描述
        四.2. 创建编写文件

                我们在 src 目录下创建 index.less 文件,然后进行编写
在这里插入图片描述
        四.3. 入口文件引入

                我们在 index.js 中引入 编写的 less 文件

// 引入样式资源
import './index.css'
import './index.less'

        四.4. 配置环境

                继续在 webpack.config.js下的 rules 中配置,在打一个中括号,可以继续配置

{
                test:/\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载 less-loader 和 less
                    'less-loader',
                ]
            }

        四.5. 下载 less 和 less-loader

npm i less-loader -D // 下载 less-loader
npm i less -D // 下载 less

        四.6. 引入打包的文件

                在 build 文件下的 index.html 文件中写 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="title">hello less</h1>
    <script src="./built.js"></script>
</body>
</html>

        四.7. 打包less文件

webpack // 执行打包命令

        四.8. 打开浏览器刷新

                运行成功!
在这里插入图片描述

五. 打包html资源

        五.1. 创建文件编写代码

                在 src 文件下创建 index.js 文件,编写代码

function sum(a,b){
    return a+b
}

console.log(sum(1,2))

                在 src 文件下创建 index.html 文件,编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1 id="title">hello html</h1>
</body>
</html>

        五.2. 安装 html-webpack-plugin

npm i html-webpack-plugin -D : 输入命令安装 html-webpack-plugin

        五.3. 创建 webpack.config.js, 进行配置

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

module.exports = {
    // webpack 配置
    // 入口
    entry:'./src/index.js',

    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
            // __dirname nodejs的变量,代表当前文件目录的绝对路径 
        path: resolve(__dirname,'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细的loader配置
            // 不同文件必须配置不同loader处理,
        ]
    },
    // plugins的配置
    plugins:[
        // 详细的plugins的配置
        // html -webpack-plugin
        new HtmlWebpackPlugin
    ],
    // 模式
    mode: 'development', // 开发环境  尽量使用开发环境去测试,因为生产环境会压缩文件,我们看不懂
    // mode: 'production', // 生产环境
}

        五.4. 打包

webpack : 输入命令进行打包
并且打包完之后,我们会发现在 build 文件夹中多出了一个 index.html 文件,会发现代码中自动引入了 built.js

在这里插入图片描述
在这里插入图片描述
        五.5. 再配置

                我们再进行配置 webpack,config.js 里面的 plugin

plugins:[
        // 详细的plugins的配置
        // html -webpack-plugin

        // 功能: 默认会创建一个空的 HTML ,自动引入打包输出所有的资源 ( js/css ) 
        // 需求: 需要有结构的 HTML 文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html' 文件, 并自动引入打包输出所有资源 ( js/css )
            template: './src/index.html'
        })
    ],

        五.6. 再打包

webpack : 输入命令进行打包
会发现 bulid 文件中的 index,html 发生了变化,多出了 h1 标签

在这里插入图片描述
        五.7. 打开浏览器,我们就会成功打包 html 资源
在这里插入图片描述

六. 打包图片资源

        六.1 创建文件编写代码

                六.1.1 在 src 文件下创建 index.html 文件,编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

                六.1.2 在 src 文件下自行复制三张照片,照片大小尽量不一样,方便后期可以看出打包后的大小
在这里插入图片描述
                六.1.3 在 src 文件下创建 index.less 文件,编写代码

#box1{
    width: 100px;
    height: 100px;
    background-image: url('./xing1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

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

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

                六.1.4 在 src 文件下创建 index.js 入口文件,编写代码

import ‘./index.less’

        六.2 配置打包环境

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

module.exports = {
    // webpack 配置
    // 入口
    entry:'./src/index.js',

    // 输出
    output: {
        // 输出文件名
        filename: 'built.js',
        // 输出路径
            // __dirname nodejs的变量,代表当前文件目录的绝对路径 
        path: resolve(__dirname,'build')
    },
    // loader的配置
    module: {
        rules: [
            // 详细的loader配置
            // 不同文件必须配置不同loader处理
            {
                test: /\.less$/,
                // 要使用多个 loader 处理用use
                use: [ 'style-loader','css-loader','less-loader' ],
            },
            {
                // 问题: 默认处理不了html 中img图片
                // 处理图片资源
                test: /\.(jpg|png|gif)$/,
                // 使用一个 loader
                // 下载 url-loader file-loader
                loader: 'url-loader',
                options:{
                    // 当发现小于 8 kb,就会被 base64 处理
                    // 优点: 减少请求数量 (减轻服务器压力)
                    // 缺点: 图片体积会更大 (文件请求速度更慢)
                    limit: 8 * 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:[
        // 详细的plugins的配置
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // 模式
    mode: 'development', // 开发环境  尽量使用开发环境去测试,因为生产环境会压缩文件,我们看不懂
    // mode: 'production', // 生产环境
}

        六.3 安装打包所需的资源

npm i webpack webpack-cli -D // 必须要下载的 webpack cli
npm i css-loader style-loader -D // 将 css-loader 和 style-loader 一起下载
npm i less-loader -D // 下载 less-loader
npm i less -D // 下载 less
npm i url-loader file-loader -D // 下载 url-loader file-loader
npm i html-loader -D

        六.四 打包

输入 webpack 命令,进行打包就可以了

七. 总结

        我们一般在项目中不可能打包这么多类型的资源. 如果是打包多种类型资源.我们就在这个文件中定义文件夹,以每种类型的资源命名,在里面创建src,build等文件夹.这样不会造成如果你要更改项目,写别的东西会报错.因为你之前打包过的东西,在你删除一些多余的文件时,你再去打包就会报错,因为打包的文件中找不到那些你删除的内容了,就会报错. 最好的方法就是你打包一种类型的资源,你就在在里面顶一个文件夹,然后写入 src,suild,配置文件webpack.config.js 等

dog-宾
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决vue+webpack打包路径的问题
08-27
然而，在实际部署过程中，可能会遇到Vue和Webpack打包路径的问题，导致应用无法正常运行。本文将详细介绍如何解决Vue+Webpack打包路径的问题。 首先，理解问题的核心在于Vue Router的history模式。在history模式下...
033_webpack打包ES6模块化工程
aihiao的专栏
02-10 1194
1. 新建项目 1.1. 新建一个ES6Model文件夹 1.2.打开VSCode 1.3. 使用VSCode打开文件夹 1.4. 选择要打开的文件夹 1.5. 资源管理器中显示打开的文件夹 1.6. 在终端中运行: npm init -y命令, 初始化包管理器文件package.json 1.7. 在ES6Model下新建一个src目录, 在src目录下新建一个index.html 1.8. 在终端中运行: npm install jquery -...
如何在VSCode中打包Vue项目？
最新发布
2301_76209425的博客
05-13 680
在配置打包命令前，我们先需要安装Vue Cli。现在，我们已经完成了Vue项目的配置，可以开始打包了。之前，我们需要先安装项目所需的依赖。四、压缩打包后的文件，压缩后的zip文件就是打包好的文件。
vscode使用webpack打包
weixin_46087854的博客
08-14 2455
webpack打包
VSCode搭建ES6开发环境
零丁若叹
12-19 4801
VSCode搭建ES6开发环境 javascript是一种高级脚本语言，常用于web应用开发，为网页开发添加动态交互。一个完整的网页通常由三部分组成，html，css和javascript，html主要完成静态内容的，比如页面布局和控件添加，css主要完成网页内容样式，比如添加颜色等，javascript主要完成交互，比如用户点击了一个按钮，接下来的操作由javascript完成。对于想入门前端开发的同学来说，javascript是必须学习的语言。 ECMAScript是什么 ECMAScript是java
VSCode项目打包详细步骤
weixin_45561430的博客
02-14 7824
C++项目打包详细步骤
webpack打包构建流程
03-13
webpack 打包构建流程 在了解 webpack 打包构建流程之前，我们需要了解一些基本概念。Webpack 是一种流行的前端构建工具，它可以将多个 JavaScript 文件打包成一个文件，以便于浏览器加载。webpack 的核心概念是 ...
Webpack打包慢问题的完美解决方法
08-31
Webpack 打包慢问题的完美解决方法 在使用 Webpack 打包项目时，经常会遇到打包速度慢的问题，这是因为 Webpack 需要处理大量的模块，从而导致打包速度慢。为了解决这个问题，我们需要了解 Webpack 的工作原理和...
webpack打包Ts简易搭建
06-29
在这个“webpack打包Ts简易搭建”项目中，我们将探讨如何使用Webpack与TypeScript（Ts）进行配置和构建。 1. **Webpack 基本概念**： - **Entry（入口）**: 项目的起点，Webpack 从这个文件开始构建依赖图。 - **...
详解webpack打包nodejs项目(前端代码)
10-18
Webpack 是一个流行的前端构建工具，它能够将 JavaScript、CSS、图片等各类前端资源打包成一个或多个可部署的文件。Webpack 打包 Node.js 项目（尤其是前端代码）的场景通常发生在前端应用需要与后端服务紧密结合时...
build项目打包
我是我
11-09 903
在Vue项目打包时，生成的文件中，都是无哈希的的js和css文件，文件比较大，会影响web性能 export 我们可以在打包前先执行 export NODE_ENV=production mac set NODE_ENV=production win window是在这里看到的，没尝试过 再执行 yarn run build 这样生成的文件就是 我们会发现文件大小全部被压缩了 这篇文章介绍的比较详细 留档记录，希望可以帮助到你~ ...
关于Webpack打包工具
乔的博客
04-13 395
https://www.jianshu.com/p/42e11515c10f https://www.cnblogs.com/fps2tao/p/10879910.html webpack它是现代JavaScript应用程序的静态模块打包器（module bundler），有入口、出口，loader（加载器）和插件（plugins）。 当webpack处理应用程序时，它会递归的构建一个依赖关系图，...
webpack打包工具的搭建
杨园园的博客
11-30 365
webpack打包工具的搭建 第一步 cmd中执行命令npm install -g webpack (安装全局webpack) 第二步 自己手动创建文件夹如 名为pack，将cmd的执行命令放到改文件目录下，如F: ，cd …/../../../ 第三步 执行命令 npm init 执行完成后pack文件下会多出文件package.json 文件 第四步 自己手动创建inde
webpack打包工具使用
枫叶在飘呀的博客
10-24 440
webpack打包工具的使用 什么是webpack？ 官方给出的解释是： webpack 是一个现代化javascript应用程序的静态模块儿打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块儿，然后将所有这些模块儿打包成一个或者多个bundle,bundle英文意思时一捆,一包,一扎的意思,接触过juery的小伙伴应该对于bundles不陌生 在下载jquery文件时有jquery.js和query.bundles.js
webpack打包详细配置
一指流沙
05-10 2147
webapck.base.config.js/** * Created by msw on 2018/4/19. */ const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractT...
webpack打包报错
热门推荐
ranran_sun的博客
01-24 2万+
学习webpack报错，npm run build正常工作，但是npm start就报错了，以下是package.json文件以及报错信息 错误日志： 0 info it worked if it ends with ok 1 verbose cli [ 'D:\\Program Files\\nodejs\\node.exe', 1 verbose cli   '
MAC 新建vue+webpack 项目提示没有权限（webstorm/后台命令都不行）
lqy729416873的博客
03-11 1431
后端执行sudo vue init webpack lulu 新建一个名字叫lulu的项目，一路会车，除了那个ellink规范代码可以选择n 然后就报错如下： ChromeDriver is already available at '/tmp/2.46/chromedriver/chromedriver'. Copying to target path /Users/luqiuyan/...
webpack打包优化
05-25
Webpack 是一个模块打包器，它能够将各种类型的资源打包成静态资源，例如 JavaScript、CSS、图片等。在实际开发中，Webpack 打包优化是至关重要的。 以下是一些常见的Webpack打包优化： 1. 减少打包文件体积：可以通过使用 Tree Shaking、Code Splitting 等技术来减少打包文件体积。 2. 使用缓存：在开发过程中，我们可以使用缓存来提高打包速度。使用缓存可以减少不必要的文件处理，从而加快打包速度。 3. 优化 loader：loader 是 Webpack 中非常重要的一个功能，可以用于处理各种类型的文件。但是，如果 loader 处理的文件过多，会导致打包速度变慢。因此，我们可以针对不同的文件类型，选择合适的 loader，这样可以提高打包速度。 4. 使用 DllPlugin：DllPlugin 可以将一些不变的库文件提前打包成静态资源，这样可以减少每次打包时对这些库文件的处理，提高打包速度。 5. 开启多进程打包：Webpack 支持多进程打包，可以将打包任务分配给多个子进程并行处理，从而提高打包速度。 以上是常见的Webpack打包优化方法，可以根据具体项目需求，选择合适的优化方案。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值