webpack-note

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

文章目录

webpack-note

webpack官网

webpack功能

  1. 将多个文件合并(打包),减少http请求,提高效率
  2. 对代码进行编译，消除浏览器的兼容性
  3. 对代码进行压缩，减少文件体积，提高加载速度，降低带宽的流量消耗
  4. 检测代码质量，提高开发效率
  5. 针对不同环境，提供不同的打包策略

安装环境

npm install webpack webpack-cli -D
npx webpack ./src/index.js --output-path ./dist --mode=development

初始环境配置

在根目录下新建webpack.config.js

拥有以下基本属性

const {resolve}=require('path')
module.exports={
    //模式development,production
    mode:'development',
    
    //入口文件
    entry:'./src/index.js',
    
    //出口文件
    output:{
        //如果不指定输出目录，那么默认是dirst
        //输出目录必须是绝对路径
        path:resolve(__dirname,'output')
        
        //指定输出的文件名称
        filename:'bundle.js'
    },
    
    //模块配置
    module:{
    	rules:[
    		//支配多个规则
    	]
	},
    
    //开发服务器(虚拟服务器)!!!!
    devServer:{}
    
    //插件配置
    plugins:[]
}

匹配css,less,sass等

匹配css文件

  1. npm i style-loader css-loader -D

  2. module:{
    rules:[
        test:/\.css$/i,
        use:[
        	//use规则从下到上调用
        	//style-loader负责把css内容的js代码挂载到页面的style标签中
        	'style-loader',
        
        	//css-loader负责遍历src的所有css文件，将css打包到输出目录
        	'css-loader'
    	]
    ]
}

  3. npx webpack

匹配less文件和sass文件和上面类似

MiniCssExtractPlugin

将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件

npm install --save-dev mini-css-extract-plugin

1.安装插件

2.在webpack.config.js中

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin({
      filename:'css/[name].css'
  })],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3.在js文件中

import './src/style.css'

4.npx webpack

CssMinimizerWebpackPlugin

优化和压缩 CSS

npm install css-minimizer-webpack-plugin --save-dev

1.安装插件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  //如果在开发者模式下想要压缩css文件需添加下面参数
  optimization: {
    minimizer: true
  },
  plugins: [new MiniCssExtractPlugin()],
};

3.npx webpack

stylelint

帮助你在样式代码中避免错误并强制规范

npm install stylelint@13.13.1 stylelint-config-standard@22.0.0 stylelint-webpack-plugin@2.1.1 -D

1.在package.json添加配置

{
    "stylelint": {
    "extends": "stylelint-config-standard"
  },
}

2.在webpack.config.json中

const StylelintPlugin=require('stylelint-webpack-plugin')

module.exports = {
  plugins: [new StylelintPlugin({
      //指定那些格式文件进行css校验
      files:['src/css/*.{css,less,sass,scss}'],
      //尽可能自动修复不合规范的格式
      fix:true
  })],
  
};

3.npx webpack

postcss-loader

使用 PostCSS 处理 CSS 的 loader,兼容个平台css

npm install postcss-loader autoprefixer -D

1.安装插件

2.创建.browerslistrc

# 注释是这样写的，以#号开头
last 1 version #最后的一个版本
> 1%  #代表全球超过1%使用的浏览器

3.创建根目录postcss.config.js

module.exports={
    plugins:[
        require('autoprefixer')
        // 'postcss-preset-env'
    ]
}

4.在webpack.config.js中

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin({
      filename:'css/[name].css'
  })],
  module: {
    rules: [
      {
        test: /\.css$/i,
        //postcss-loader要加在css-loader后(逻辑上是前)
        //也就是要先处理postcss-loader再处理css-loader
        use: [MiniCssExtractPlugin.loader, "css-loader","postcss-loader"],
      },
    ],
  },
};

5.npx webpack

HtmlWebpackPlugin

可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

npm install --save-dev html-webpack-plugin

1.安装插件

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({
      //指定模板
      template:'./src/index.html',
      
      //文件名
      filename:'index.html',
      
      //标题
      title:'xxx',
      
      //如果在开发者模式下也想压缩html文件，可以使用minify
      minify:{
          collapseWhitespace: true,
          keepClosingSlash: true,
          removeComments: true,
          removeRedundantAttributes: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          useShortDoctype: true
     	}
  })],
};

3.在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><%= HtmlWebpackPlugin.options.title %></title>
</head>
<body>
    
</body>
</html>

CopyWebpackPlugin

将已存在的单个文件或整个目录复制到生成目录。

npm install copy-webpack-plugin --save-dev

1.安装插件

2.目录结构

D:\webpackDemo
├─package.json
├─webpack.config.js
├─ouput
├─node_modules
├─src
  ├─public
	├─favicon.ico
  ├─index.js

3.webpack.config.js

const CopyWebpackPlugin=require('copy-webpack-plugin')

module.exports = {
  plugins: [new CopyWebpackPlugin({
      patterns:[
           {
              // 从src的public
              from:'./src/public',
              // 到output的public
              to:'public'
            }
        ]
  })],
  
};

4.npx webpack

clean-webpack-plugin

一个 webpack 插件，用于删除/清理您的构建文件夹。

npm install --save-dev clean-webpack-plugin

1.安装插件

2.在webpack.config中

//注意只能使用解构的方式
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  plugins: [new CleanWebpackPlugin()],
  
};

3.npx webpack

babel-loader

此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件,使之兼容es6+基础语法。

npm install babel-loader @babel/core @babel/preset-env -D

1.安装插件

2.webpack.config.js中


module.exports = {
  module:{
      rules:[
          {
              test:/\.m?js$/i,
              //针对src的所有文件，在内部进行转换语法，src的js代码不变
              //除了node_module目录里的文件，其他目录都要进行转换
              exclude:/node_module/,
              use:{
                  loader:'babel-loader',
                  options:{
                      presets:[
                          '@babel/preset-env'
                      ]
                  }
              }
          }
      ]
  }
  
};

3.npx webpack

@babel/polyfill

兼容js更高阶的语法，要在js es6+基本语法配置完整基础上，也就是上面的配置也要进行完善,但是会把其规范内的全部转义，体积大不推荐

npm install @babel/polyfill -D

1.安装插件

2.在index.js中

import '@babel/polyfill'

3.npx webpack

core-js

按需转义js高阶语法，也要在js es6+基本语法配置完整基础上

npm install core-js -D

1.安装插件

2.webpack.config.js

module.exports = {
  module:{
      rules:[
          {
              test:/\.m?js$/i,
              //针对src的所有文件，在内部进行转换语法，src的js代码不变
              //除了node_module目录里的文件，其他目录都要进行转换
              exclude:/node_module/,
              use:{
                  loader:'babel-loader',
                  options:{
                      presets:[
                          '@babel/preset-env',
                          {
                              //按需加载
                              useBuiltIns:'usage',
                              //指定core.js版本
                              //和package.json一致
                              corejs:{
                                  version:3
                              }
                          }
                      ]
                  }
              }
          }
      ]
  }
  
};

3.注意：index.js里的import '@babel/polyfill’要删掉

eslint

对js文件进行校验

npm install eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import -D

eslint:对js进行格式校验
eslint-config-airbnb-base：包含格式校验规则
eslint-webpack-plugin：webpack插件
eslint-plugin-import：读取eslint配置项配置

1.在package.json中

{
    "eslintConfig": {
    "extends": [
      "airbnb-base"
    ],
    "rules": {
      "no-undef": "off",
      "no-console": "off",
      "no-unused-vars": "off"
    }
  }
}

2.在webpack.config.js中

const EsLintPLugin=require('eslint-webpack-plugin')
module.exports = {
  plugins: [new EsLintPLugin({
      //指定要校验的文件后缀
      extension:['js','json'],
      exclude:'/node_modules/',
      //尽可能校验
      fix:true
  })],
  
};

file-loader

将文件发送到输出目录

npm install file-loader --save-dev

1.index.js

import img from './file.png';

2.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
        type:'javascript/auto'
      },
    ],
  },
};

3.npx webpack

url-loader

webpack 的加载器，它将文件转换为 base64 URI

npm install url-loader --save-dev

1.index.js

import img from './file.png';

2.style.css

body{
    background:url(./img/file.jpg)
}

3.webpack.config.js(css里的font 文件也可加载)

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options:{
                //限制大小，小于这个大小，图片会被转成base64
                limit:8*1024,
                name:"[name].[ext]",
                //启用commonjs语法，一般加上
                esModule:false
            }
          },
        ],
        type:'javascript/auto'
      },
    ],
  },
};

4.注意：一般有问题的话最好再安装以下file-loader

5.npx webpack

asset

webpack5自带的，使用他来加载资源文件，而无需其他loader,加载js,css文件里的资源

1.webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
       	parser:{
            dataUrlCondition:{
                maxSize:8*1024
            }
        },
        generator:{
            //存放在指定的输出目录的文件夹，并默认名称
            filename:"image/[name][ext]"
        }
        type:'asset'
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
       	parser:{
            dataUrlCondition:{
                maxSize:8*1024
            }
        },
        generator:{
            //存放在指定的输出目录的文件夹，并默认名称
            filename:"fonts/[name][ext]"
        }
        type:'asset'
      },
    ],
  },
};

html-loader

将 HTML 导出为字符串。当编译器需要时，将压缩 HTML 字符串。

也可使html文件中的一些资源压缩

npm install --save-dev html-loader

1.安装插件

2.webpack.config.js中

module.exports = {
  module: {
    rules: [
      {
        test: /\.(htm|html)$/i,
        use:{
            options:{
            	esModule:false
        	}
        }
      },
    ],
  },
};

webpack-dev-server

为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。

npm install --save-dev webpack-dev-server

1.安装插件

2.webpack.config.js中

module.exports={
    //开发服务器
    devServer:{
        //加载的内容的路径
        static:resolve(__dirname,'output'),
        
        //启用gzip能够以75%的压缩率来压缩资源
        compress:true,
        
        //端口号
        port:9999,
        
        //启动热加载(自动更新)
        hot:false,
        liveReload:true,
        
        //配置代理 重要！！！
        proxy:{
            '/api':{
                //请求的host
                //http://localhost:9999/api/users==>https://api.github.com/api/users
                // http://api.github.com/api/users=>https://api.github.com/users
                target:'https://api.github.com',
                pathRewrite:{
                    '^/api':''
                }
            },
            changeOrigin:true
        }
        
    },
    //配置目标
    target:'web'
}
早日暴富1
关注
专栏目录
html-webpack-plugin插件,webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks...
weixin_29695125的博客
07-01 1369
最近在这段时间刚好在温故下webpack源码，webpack5都出来了，4还不再学习下？这次顺便学习下webpack的常用插件html-webpack-plugin。发现这个插件里面还额外加入了自己的hooks，方便其它插件来实现自己的功能，不得不说作者真是个好人。部分代码如下// node_modules/html-webpack-plugin/index.jsapp(compiler) {//...
【webpack5】webpack-dev-server 不能正常启动
小笼包不是包的博客
01-29 2972
【webpack5】webpack-dev-server 不能正常启动 一、问题 webpack-dev-server --open --config script/webpack.dev.js webpack4环境下可以正常启动，但是升级webpack5后依赖都要升级，再跑这个指令就会报错： internal/modules/cjs/loader.js:584 throw err; ^ Error: Cannot find module 'webpack-cli/bin/confi
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs‘)
超悠閒的博客
06-16 1万+
Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module ‘webpack-cli/bin/config-yargs’) 文章目录Webpack 踩坑笔记: webpack-dev-server 启动命令失败(Error: Cannot find module 'webpack-cli/bin/config-yargs')前言正文项目背景问题描述解决方案方案 1：使用新命令 webpack serve(推荐)方案 2：降低 webpa
uglifyjs-webpack-plugin 中文文档
热门推荐
杨小柒的博客
10-29 4万+
uglifyjs-webpack-pluginUglifyJS Webpack Plugin 原文档地址 此插件使用uglify-js进行js文件的压缩。 requirements 该模块需要的环境： node 6.9.0 webpack 4.0.0 版本以上。 getting started 开始之前，需要安装 uglifyjs-webpack-plugin: $ npm install ug...
webpack-dev-server和webpack
weixin_30819085的博客
08-22 161
指导小伙伴在webstorm+nodejs环境下新建项目时，小伙伴出现了一个很神奇的问题：没有执行webpack-dev-server情况下，即使执行npm init，也不会出现package.json文件。原本的印象中package.json是保存文件基本信息以及依赖包版本的文件。不知道为什么他和webpack-dev-server有关系。就开始研究webpack-dev-server的相关概念...
Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享
超悠閒的博客
06-04 8787
Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享 文章目录Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享系列文章前言正文0. 为什么需要进度条？1. 安装依赖2. 使用示例2.1 progress-bar-webpack-plugin 效果2.2 webpackbar 效果3. 踩坑笔记: 进度条跑位结语其他资源参考连接完整代码示例 系列文章 W
webpack-dev-server
RankBill
06-10 1553
本文翻译自（  https://wohugb.gitbooks.io/webpack/content/dev_tools/webpack-dev-server.html），感谢原网站整理提供的资源。    webpack-dev-server 是一个小型的 Express（node.js）服务器，它通过配置webpack开发中间件来为项目打包。webpack-dev-server 通过Socket...
webpack-dev-server使用报错
lin_ji_you的博客
01-07 655
报错信息 internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack: - C:\Users\Administrator\Desktop\note\webpack01\node_modules\webpack-dev-server\bin\webpack-dev-server.js at Function.Modu
详解webpack-dev-server的使用
kuangruike的博客
01-10 3104
webpack-dev-server webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的配置文件(webpack.config.js) var path = requir
oilerplate-webpack-babel：Web Webpack和Babel.js入门
01-31
样板-webpack-babel :fork_and_knife: Webpack和Babel.js入门 产品特点 :white_heavy_check_mark: Webpack v4.43.0 :white_heavy_check_mark: Babel（核心） v7.10.2 ...cd $_ # Note: "$_" is the l
详解webpack-dev-server的简单使用
weixin_44526331的博客
01-16 4731
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时. 我们来看一下下面的配置文件(webpack.config.js) var path = require("path"); module.exports = { en...
Webpack 特性探讨：CDN、分包、Tree Shaking 与热更新
前端探索者
09-29 1139
Webpack 作为现代前端开发中的核心构建工具，提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新（HMR）等关键特性。我们将使用前一篇文章中的代码，然后我们引入一些图片、css 等资源文件已经一些常用的第三方库，如lodash。
Webpack和GuIp打包原理以及不同
qq_39056703的博客
09-28 511
然后，Webpack会按照指定的规则将这些模块打包成一个或多个bundle文件，这些bundle文件包含了应用程序运行所需的所有资源，并且通过加载器（loader）和插件（plugins）对资源进行预处理和后处理，以满足生产环境的需求。Gulp的打包过程主要依赖于流（stream）的概念，它允许数据从一个task流向另一个task，每个task可以对数据进行处理（如压缩、合并等），并将处理后的数据传递给下一个task。
学习Webpack中图片-JS-Vue-plugin
qq_45730399的博客
09-30 1176
打包图片、js、vue，学习webpack插件
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5781
Webpack 打包后文件过大，如何优化？
js逆向——webpack实战案例(一)
Tandy12356_的博客
09-28 783
首先通过跟栈的方法找到加密位置我们跟进u函数，发现是通过webpack加载的向上寻找u的加载位置，然后打上断点，刷新网页，让程序断在加载函数的位置u = r.n(a)
Webpack模式-Resolve-本地服务器
最新发布
qq_45730399的博客
10-02 941
Resolve解析、模式、搭建本地服务器
webpack 4 的 30 个步骤构建 react 开发环境
hxbao的专栏
09-27 991
其实很多人都有的特点(当然也包括我在内)，这个时候，你需要制定一个略微详细的计划，就比如我这篇会首先列出知识点，列出大的方向，制定思维导图，然后根据思维导图编写代码，计划明确，就会事半功倍，因此，。一、基础配置。
vue实现tree-shaking
03-29
mangle: true, // Note `mangle.properties` is `false` by default. module: false, output: null, toplevel: false, nameCache: null, ie8: false, keep_classnames: undefined, keep_fnames: false, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值