webpack基本使用（基础）

张帅涛_6662024-09-05 5:02

文章目录

概要理解

vue或者react 通常用webpack作为打包工具，打包成浏览器识别的html、css、js -------简单理解webpack做为一个工厂。

  1. 需要告诉工厂先从那个入口(entry)开始去处理代码（通常是项目的main.js入口文件）
  2. 在所有的资源都间接或者直接被man,js引入之后，使用加载器(loaders) 将不同的原材料（less 、图片、css）转成javascript能理解的文件
  3. 当工厂还需要做一些特殊的处理(检查文件、代码压缩、图区css到单独的文件)的操作，这就是用来做特殊处理的工具(plugins)
  4. 那都处理好之后就需要输出了吧(output), webpack就将模块打包成一个或者多个文件，这些文件最终是浏览器运行的代码包

一、使用示例

首先先去webpack官方网站，包含了各种loader和plugins

1.引入库

npm install less less-loader --save-dev //处理less

npm install --save-dev css-loader //处理css

npm install --save-dev style-loader //处理style

npm install stylus stylus-loader --save-dev //处理stylus

...

2.创建config/webpack.dev.js 测试环境

c 复制代码 
//创建config/webpack.dev.js 测试环境

 //处理路径问题
const path = require("path");
//使用ESLintPlugin 来做文件检查(常用作团队开发 规范代码作用）
const ESLintPlugin = require("eslint-webpack-plugin"); 
//在打包之后的dist文件中 生成一个html根目录文件
const HtmlWebpackPlugin = require("html-webpack-plugin");

 //工厂
module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 所有文件的输出路径
    // 开发模式没有输出
    path: undefined,//开发模式中 devserver会重新运行刷新
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        // 每个文件只能被其中一个loader配置处理
        oneOf: [
          {
            test: /\.css$/, // 只检测.css文件
            use: [
              // 执行顺序：从右到左（从下到上）
              "style-loader", // 将js中css通过创建style标签添加html文件中生效
              "css-loader", // 将css资源编译成commonjs的模块到js中
            ],
          },
          {
            test: /\.less$/,
            // loader: 'xxx', // 只能使用1个loader
            use: [
              // 使用多个loader
              "style-loader",
              "css-loader",
              "less-loader", // 将less编译成css文件
            ],
          },
          {
            test: /\.s[ac]ss$/,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader", // 将sass编译成css文件
            ],
          },
          {
            test: /\.styl$/,
            use: [
              "style-loader",
              "css-loader",
              "stylus-loader", // 将stylus编译成css文件
            ],
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                // 小于10kb的图片转base64
                // 优点：减少请求数量（降低服务器压力）  缺点：体积会更大
                maxSize: 10 * 1024, // 10kb
              },
            },
            generator: {
              // 输出图片名称
              // [hash:10] hash值取前10位
              filename: "static/images/[hash:10][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?|map3|map4|avi)$/,
            type: "asset/resource",
            generator: {
              // 输出名称
              filename: "static/media/[hash:10][ext][query]",
            },
          },
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  // 插件
  plugins: [
    // plugin的配置
    new ESLintPlugin({
      // 检测哪些文件
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1. 结构和原来一致 2. 自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器: 不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 模式
  mode: "development",
  devtool: "cheap-module-source-map",
};

3.创建config/webpack.prod.js 正式环境

c 复制代码 
//创建config/webpack.prod.js 正式环境

 //处理路径问题
const path = require("path");
//使用ESLintPlugin 来做文件检查(常用作团队开发 规范代码作用）
const ESLintPlugin = require("eslint-webpack-plugin"); 
//在打包之后的dist文件中 生成一个html根目录文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//将打包的css 处理成单独的css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//将抽离出来的css 进行压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");


// 用来获取处理样式的loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader, // 提取css成单独文件
    "css-loader", // 将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    pre,
  ].filter(Boolean);
}

module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 所有文件的输出路径
    // __dirname nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "../dist"), // 绝对路径
    // 入口文件打包输出文件名
    filename: "static/js/main.js",//最终路径在dist/static/js/main.js
    clean: true, //新打包的dist会更新掉旧的 
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        oneOf: [
          {
            test: /\.css$/, // 只检测.css文件
            use: getStyleLoader(), // 执行顺序：从右到左（从下到上）
          },
          {
            test: /\.less$/,
            // loader: 'xxx', // 只能使用1个loader
            use: getStyleLoader("less-loader"),
          },
          {
            test: /\.s[ac]ss$/,
            use: getStyleLoader("sass-loader"),
          },
          {
            test: /\.styl$/,
            use: getStyleLoader("stylus-loader"),
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                // 小于10kb的图片转base64
                // 优点：减少请求数量  缺点：体积会更大
                maxSize: 10 * 1024, // 10kb
              },
            },
            generator: {
              // 输出图片名称
              // [hash:10] hash值取前10位
              filename: "static/images/[hash:10][ext][query]",
            },
          },
          {	//字体图标 其他资源文件 处理
            test: /\.(ttf|woff2?|map3|map4|avi)$/,
            type: "asset/resource",
            generator: {
              // 输出名称
              filename: "static/media/[hash:10][ext][query]",
            },
          },
          {	
           // 排除node_modules下的文件，将其他的js文件都做处理 
           //（因为浏览器虽然识别js文件，但是一些es6新语法
           // 比如箭头函数、解构赋值依然没办法识别）所以使用babel转译代码
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  // 插件
  plugins: [
    // plugin的配置
    new ESLintPlugin({
      // 检测哪些文件 (检查src下面所有的文件)
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1. 结构和原来一致 2. 自动引入打包输出的资源
      //会在dist文件下创建一个一样index.html 并且以link标签方式，引入了output出口文件main.js文件
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    //在插件中 创建MiniCssExtractPlugin(将css文件抽出，并放到指定的目录下)
    //打包后 会以link标签方式，在index.html，引入了main.css文件
    new MiniCssExtractPlugin({
      filename: "static/css/main.css",
    }),
    //在将main.css文件进行压缩
    new CssMinimizerPlugin(),
  ],
  // 模式
  mode: "production",
  devtool: "source-map",
};

3.eslintrc.js

javascript 复制代码 
//根目录下 eslintrc.js  需要在webpack.prod.js做相应配置 
//在这个文件下 来自定义语法规范
module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6, // es6
    sourceType: "module", // es module
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

4.babel.config.js

javascript 复制代码 
//根目录下 babel.config.js  需要在webpack.prod.js做相应配置 
//（因为浏览器虽然识别js文件，但是一些es6新语法
// 比如箭头函数、解构赋值依然没办法识别）所以使用babel转译代码
// 配置智能预设（根据你所支持的浏览器或运行环境（如 Node.js）的版本，自动决定需要哪些 Babel 插件来转换代码）
module.exports = {
    // 智能预设：能够编译ES6语法
    presets: ["@babel/preset-env"],
  };

5.package.json

javascript 复制代码 
{
  "name": "web-pack-code",
  "version": "1.0.0",
  "description": "",
  //测试环境下 输出文件
  "main": "./src/main.js",
  "scripts": {
    //启动dev命令 令devserver重新刷新项目 
    //devserver 实际会打包，但是打包的会存储在内存中，不会写入到磁盘    中，让保存修改文件时，触发devserver会重新更新，并将结果存储到内存中。
    "start": "npm run dev",
    //这里测试环境入口 就是配置的webpack.dev.js
    "dev": "webpack serve --config ./config/webpack.dev.js",
    // 打包 使用配置的正式环境 打包成一个或者多个文件组合成的dist
    "build": "webpack --config ./config/webpack.prod.js"
  },

总结

`未完 继续更新，有错误请留言 会及时改正

相关推荐
傻小胖15 分钟前
vue3中Teleport的用法以及使用场景
前端·javascript·vue.js
wl85111 小时前
Vue 入门到实战 七
前端·javascript·vue.js
Enti7c1 小时前
用 HTML、CSS 和 JavaScript 实现抽奖转盘效果
前端·css
LCG元1 小时前
Vue.js组件开发-使用Vue3如何实现上传word作为打印模版
前端·vue.js·word
engchina1 小时前
在 Ubuntu 上安装 Node.js 23.x
linux·ubuntu·node.js
dal118网工任子仪2 小时前
94，【2】buuctf web [安洵杯 2019]easy_serialize_php
android·前端·php
大模型铲屎官2 小时前
HTML5 技术深度解读：本地存储与地理定位的最佳实践
前端·html·html5·本地存储·localstorage·地理定位·geolocation api
一 乐3 小时前
基于vue船运物流管理系统设计与实现(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端·船运系统
m0_528723813 小时前
在React中使用redux
前端·javascript·react.js
傻小胖3 小时前
vue3中customRef的用法以及使用场景
前端·javascript·vue.js
热门推荐
01DeepSeek本地部署详细指南02【deepseek】deepseek-r1本地部署-第一步：下载LM Studio03DeepSeek r1本地安装全指南04将DeepSeek接入Word，打造AI办公助手05使用Ollama 在Ubuntu运行deepseek大模型：以DeepSeek-coder为例06DeepSeek学术写作测评第一弹：论文润色，中译英效果如何？07DeepSeek 云端部署，释放无限 AI 潜力！08新鲜速递：DeepSeek-R1开源大模型本地部署实战—Ollama + MaxKB 搭建RAG检索增强生成应用09Dell服务器升级ubuntu 22.04失败解决10在Windows下安装Ollama并体验DeepSeek r1大模型