webpack打包

VIP文章誰言秋桜

已于 2023-03-10 19:28:56 修改

阅读量762

点赞数

分类专栏：学习笔记 webpack 文章标签： webpack 前端 node.js

于 2023-02-27 18:19:40 首次发布

本文链接：https://blog.csdn.net/weixin_64948861/article/details/129226324

版权

简介：

webpack是一个前端资源构建工具，一个静态资源打包器。

在webpack看来，前端的所有资源文件（js/json/img/less/....）都会做为模块处理。

它根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

一、环境参数：

1、node.js 10.版本以上

2、wepback 2.26版本以上

二、技能掌握：

1、基本node.js知识和 npm指令

2、熟悉ES6语法

三：知识点分析

代码说明：

<!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>
    <link rel="stylesheet" href="./index.less">
</head>
<body>
    <h1 id="titlr">hello webpack</h1>
    <script src="./index.js"></script>
</body>
</html>

body,html{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: pink;
    #titlr{
        color: #fff;
    }
}

//引入js资源
import $ from 'jquert';
//引入样式资源
import './index.less';
//引入图片、字体等其他资源


$('titlr').click(()=>{
    $('body').css('backgroundColor','deeppink');
})

1、先安装指令（初始包）：

npm init

2、命名

webpack_test

安装完成，一直回车即可,名字test，可以自己写

四：webpack五个核心概念

1、Entry

入口（Entry）指示webpack以那个文件为入口起点打包，分析构建内部依赖图

2、Output

输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名

3、Loader

Loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）

注意：只能处理JavaScript，json文件 / css，图片等文件不能处理，需要翻译从JavaScript

4、Plugins

组件（Plugins）可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩。一直到重新定义环境中的变量等

5、Mode

模式（Mode）指示Webpack使用相应模式的配置

分为：开发模式和生产模式

代码模块：

1、指令安装：

npm init

2、命名

webpack_test

3、下包（全局安装）

npm i weback webpack-cli -g

npm i weback weback-cli -D

运行指令：

index.js:webpack入口起点文件

1.运行指令：
  开发环境：webpack ./src/index.js -o ./bulid/bulit.js --mode=development
  webpack会以 ./src/index.js为入口文件开始打包，打包后输出到 ./bulid/bulit.js
  整体打包环境，是开发环境

  生产环境：webpack ./src/index.js -o ./bulid/bulit.js --mode=production
   webpack会以 ./src/index.js为入口文件开始打包，打包后输出到 ./bulid/bulit.js
  整体打包环境，是生产环境

注意：每修改一次代码都需要重新运行打包，不然返回结果是上一次的

结论：

1、webpack能处理js/json资源，不能处理css/img 等其他资源

2、生产环境和开发环境将es6模块化编译成浏览器能识别的模块化

3、生产环境比开发环境多一个压缩js代码

五：样式打包

module.extends ={
    //webpack配置
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{

 
//输入文件名
filename:'built.js',
//输出路径
//_dirname nodejs的变量，代表当前文件的目录绝对路径
path:resolve(_dirname,'build')
    },
module:{
    rules:[
        //详细loader配置
        //不同文件必须配置不同loader处理
        //不能复用
        {
            test:/\.css$/,
            //所有那些loader进行处理
            use:[
                //use数组中loader执行顺序：从左到右从下到上，依次执行
                //创建style标签，将js中的样式资源插入进行，添加到hend中生效
                'style-loader',
                //将css文件变成commonjs模块加载js中，里面内容是样式字符串
                'css-loader'
            ]
        },
        {
            test:/\.less$/,
            use:[
                'style-loader',
                'css-loader',
                //将less文件编译成css文件
//需要下载less-loader和less包
                'less-loader'
            ]
        }
    ]
}
   }

注意：要重新下载包（可以在整体文件下安装，可以避免调用时需要重新安装）

npm i webpack webpack-cli -D

新增加一个包，用来打包样式资源的

npm i css-loader style-loader -D

运行指令：

webpack

打包less，下载指令：

npm i less-loader -D

npm i less -D

六：打包html资源

配置：

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

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

module.extends

最低0.47元/天解锁文章

誰言秋桜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack打包

简介：webpack是一个前端资源构建工具，一个静态资源打包器。在webpack看来，前端的所有资源文件（js/json/img/less/....）都会做为模块处理。它根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）
复制链接

扫一扫