webpack入门

嘟噜嘟噜123

已于 2022-09-07 16:40:59 修改

阅读量174

点赞数 1

分类专栏： webpack 文章标签： webpack javascript 前端

于 2022-08-15 21:39:32 首次发布

本文链接：https://blog.csdn.net/m0_62371223/article/details/126355418

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一：概念

本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 。
当 webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有
把所有文件经过 webpack 处理,生成 html,css,图片,js这些模块打包成一个或多个bundle 。如下图：
在这里插入图片描述

二：安装

1.创建一个包，配文件

1、全局安装

npm install -g webpack webpack-cli

2、安装后查看版本号

webpack -v

三、初始化项目

1.进入webpack目录，执行项目文件环境

npm init -y

2、创建src文件夹
3、src下创建herder.js

 var header = document.createElement("div");
 header.innerHTML = "你好webpack5.0";
 header.className="active";
 export default header;

4.src下创建index.js

import header from './header'
import './assets/base.css'
// 导入图片
import pic from './assets/pic4.png';
document.body.appendChild(header);

// 创建图片
var img  = document.createElement("img");
img.width="500";
// 指定图片大小与src
img.src = pic;
// 插入到body中
document.body.appendChild(img);

import pic2 from './assets/sun.jpeg';
var img2 = document.createElement("img");
img2.src = pic2;
document.body.appendChild(img2);

四、JS打包

1、webpack目录下创建配置文件webpack.config.js
以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry:'./src/index.js',//入口 (webpack 从哪个文件开始运行)
    output:{
        path:__dirname+'/dist', //目录，__dirname当前绝对目录
        filename:'main.js',//打包好的js文件名称
    },//出口,
}

2.配置项目的npm运行命令，修改package.json文件

"scripts": {
    "build": "webpack",
}

运行npm命令执行打包

npm run build

3、webpack目录下创建文件夹dist，在dist下创建index.html
引用bundle.js

<body>
     <script defer="defer" src="dist/bundle.js"></script>
</body>

4、浏览器中查看index.html
在这里插入图片描述

五、CSS打包

**1、加载器loader

安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css,把css插入到style标签

npm i style-loader css-loader -D

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以.css结尾的文件上
                use: ['style-loader', 'css-loader'] //使用两个loader加载器
            }  
        ]  
    }
}

3、在src文件夹创建assets，在assets下创建style.css

.active{
    background-color: #f70;
    color:#fff;
}

4、修改src下的.js
在第一行引入style.css

import './assets/base.css'

5、浏览器中查看index.html
看看背景是不是变色啦？

6.加载文件
因为像 .png 这样的文件不是一个 JavaScript 模块，你需要配置 webpack 使用 file-loader 或者 url-loader 去合理地处理它们。

转换资源 URL 的好处是：

file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

url-loader 基于file-loader，如果文件比较小，转为base64格式，减少http请求的次数。如果文件大于该阈值，会自动的交给 file-loader 处理。

安装：npm i file-loader url-loader -D

修改webpack.config.js

在这里插入图片描述

const path = require('path')

module.exports = {
    entry:'./src/index.js',//入口 (webpack 从哪个文件开始运行)
    output:{
        path:__dirname+'/dist', //目录
        filename:'main.js',//打包好的js文件名称
    },//出口,
    mode:"production",//模式 产品模式,production,开发模式development
    module:{
        // 规则
         rules:[
            // 当遇到.css结尾的文件,使用style-loader与css-loader
            {"test":/\.css/,use:["style-loader","css-loader"]},
            {
                "test":/\.(png|jpg|jpeg|svg|ico|bmp|gif|webp)/,
                use:[
                    {loader:"url-loader",options:{
                        name:"img/[name].[ext]",
                        // 如果小于10k就打包base64
                        limit:10240,//如果文件小于3k 转换为base64 代码格式 
                    }}
                ]

            }
         ]   
    },
}

六：devServer本地服务器

1.作用：本地启动一个服务器
2.安装

npm i webpack-dev-server

3.配置

在webpack.config.js里修改

//在webpack.config.js里修改
devSever:{
   host:"localhost",   //本地域名
   port:"8080",   //端口号
   hot:true,  //热更新
   open:true,//自动打开浏览器
   proxy:{},//代理，同vue.config.js里面的代理配置
}

在package.json里修改

//package.json
"script":{
    "serve":"webpack serve"
}

4.运行

npm  run serve

七：plugins插件

1.作用：在webpack运行过程做打包,压缩,清理

2.使用

2.1 html-webpack-plugin 把模板html 插件打包好的js 拷贝到 dist目录

//01 安装
npm i html-webpack-plugin
//02 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
//03 使用,在webpack.config.js里修改
plugins:[
   // 实例化插件(把public的index.html 插入main.js(打包好的文件) 拷贝到 dist目录)
   new HtmlWebpackPlugin({template:"./public/index.html"})
]

2.2 CleanWebpackPlugin 清理 /dist 文件夹

安装 npm i clean-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 使用
plugins: [
  new CleanWebpackPlugin({
		cleanAfterEveryBuildPatterns: ['dist'],
  }),
]

2.3 Optimize 优化css插件

安装 optimize-css-assets-webpack-plugin -D

//导入
const optimizecss = require('optimize-css-assets-webpack-plugin')
//使用
plugins: [
  //使用
  optimization:{//优化选项
     minimizer:[new optimizecss()],
  }
  //2.使用插件
  new miniCssextractPlugin({
    filename:"style-[hash:7].css"  
  }),
]

2.4 ExtractTextPlugin 抽离 css 样式
该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象。

安装 npm i mini-css-extract-plugin -D

//导入
const miniCssextractPlugin = require('mini-css-extract-plugin')
//使用
plugins: [
  //1.使用loader
  use:[miniCssextractPlugin.loader,"css-loader"],
  //2.使用插件
  new miniCssextractPlugin({
    filename:"style-[hash:7].css"  
  }),
]