Webpack基础笔记二

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

目录

一 eslint

（1）介绍

（2）使用

二 Babel

（1）配置文件

(2)具体配置

三 处理HTML资源

四 开启服务器&自动化

五 生产模式介绍

六 Css处理

提取 Css 成单独文件

Css 兼容性处理

Css压缩

一 eslint

（1）介绍

 1）配置文件

●.eslintrc.* :新建文件，位于项目根目录，
     .eslintrc
    .eslintrc.js
    .eslintrc.json
 区别在于配置格式不- -样
●package.json中eslintConfig :不需要创建文件,在原有文件基础上写

Eslint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

   2）具体配置

我们以.eslintrc.js 配置文件为例:

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

   1.parserOptions 解析选项目

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

2 rules具体规则
“off” 或0 -关闭规则1
"warn" 或1-开启规则，使用警告级别的错误:warn(不会导致程序退出)
"error"或2 -开启规则，使用错误级别的错误:error(当被触发的时候，程序会退出)
 

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

3. extends继承

// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

（2）使用

1)下载包

npm i eslint-webpack-plugin eslint -D

2）定义Eslint配置文件

  • .eslintrc.js
module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

 3）修改js文件代码

main.js:

import count from "./js/count";
import sum from "./js/sum";
....
var result1 = count(2, 1);
console.log(result1);
var result2 = sum(1, 2, 3, 4);
console.log(result2);

webpack.config.js:


const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
....
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
 ...
};

4)运行指令

npx webpack

（3）eslint插件

打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误,

但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

.eslintignore:

# 忽略dist目录下所有文件
dist

二 Babel

JavaScript 编译器。主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

（1）配置文件

babel.config.* :新建文件，位于项目根目录
             babel. config.js
           babel. config.json
.babelrc.* :新建文件，位于项目根目录
               . babelrc
              .babelrc.js
              .babelrc. json 
package.json中babel :不需要创建文件,在原有文件基础上写

(2)具体配置

我们以   babel. config.js 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

1. presets预设
简单理解:就是一-组Babel插件,扩展Babel功能
●@babe1/preset-env :一个智能预设，允许您使用最新的JavaScript。
●@babel/preset-react :一个用来编译React jsx语法的预设

●@babel/preset-typescript :一个用来编译TypeScript语法的预设

（3）在webpack中使用

1）下载包

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

2）定义 Babel 配置文件

babel.config.js中

module.exports = {
  presets: ["@babel/preset-env"],
};

3）配置

webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
...
  module: {
    rules: [
    
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
 
};

4)运行指令

npx webpack

打开打包后的 dist/static/js/main.js 文件查看，会发现箭头函数等 ES6 语法已经转换了

三 处理HTML资源

1 下载包

npm i html-webpack-plugin -D

2 配置

webpack.config.js中添加


const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  
  plugins: [

    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
};

3 修改index.html

去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入

4. 运行指令

npx webpack

此时 dist 目录就会输出一个 index.html 文件

四 开启服务器&自动化

（1）下载包

npm i webpack-dev-server -D

（2）配置

webpack.config.js:

// 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

(3）运行指令

npx webpack serve

此时运行指令发生变化

当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

五 生产模式介绍

这个模式下我们主要对代码进行优化，让其运行性能更好。

优化主要从两个角度出发:

         优化代码运行性能

        优化代码打包速度

（1）准备

文件目录

├── webpack-test (项目根目录)
    ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录，除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)

（2）修改webpack.dev.js
因为文件目录变了，所以所有绝对路径需要回退- -层目录才能找到对应的文件

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, //改变一： 开发模式没有输出，不需要指定输出目录
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
//改变二： clean: true, // 开发模式没有输出，不需要清空输出结果
    }
,
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
          //改变三
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
     //改变四
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
};

运行开发模式的指令： 

npx webpack serve --config ./config/webpack.dev.js

（3）修改webpack.prod.js
 

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  ...(module、plugins与webpack.dev.js这块相同)
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

运行生产配置指令： 

npx webpack --config ./config/webpack.prod.js

（4）配置运行指令

为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

以后启动指令：

开发模式：npm start或npm run dev

生产模式：npm run build

六 Css处理

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

提取 Css 成单独文件

（1）下载包

npm i mini-css-extract-plugin -D

（2）配置

webpack.prod.js中添加

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
   ......
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
     ......
      
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
       ......
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],

  mode: "production",
};

运行指令

npm run build

Css 兼容性处理

（1）下载包

npm i postcss-loader postcss postcss-preset-env -D

（2）配置

修改webpack.prod.js的module中代码

module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
....
}

我们可以在package. json文件中添加 browserslist 来控制样式的兼容性做到什么程度。

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

（3）合并配置

webpack.prod.js中

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

运行指令：

npm run build

Css压缩

（1）下载包

npm i css-minimizer-webpack-plugin -D

(2)配置

webpack.prod.js中添加

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

在其plugins添加

 // css压缩
    new CssMinimizerPlugin(),

（3）运行指令

npm run build

其他：

默认生产模式已经开启了：html 压缩和 js 压缩

不需要额外进行配置

天天想着发财致富
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuecli2 vuecli3去除打包后静态资源文件名的hash值
Study_Live_Sun的博客
10-23 1534
vuecli2 修改vue项目根目录下的 build/webpack.prod.conf.js文件==》 js模块： output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'),==》utils.assetsPath('js/[name].js?t=[chunkhash]') chunkFilename: utils.assetsPath('js/[id.
webpack 配置dev 运行 域名为当前ip
云未然的博客
05-28 822
项目运行环境 webpack 版本"webpack":"^3.6.0", vue-cli 版本 2.9.6 在config 目录 的index.js 顶部 引入以下代码 //引入os 直接引入 const os = require('os'); const getIp = () => { let host = ''; try { let netWorkList = os.networkInterfaces(); for (let i in netWo...
webpack安装、配置
qq_34509189的博客
12-28 1115
webpack官网概念: 本质上，webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。 开始： 首先确保安装了node.js 1.初始化、安装 创建一个文件夹，在文件夹地址栏输入 cmd 如图： 进入命令页： //初始化 np...
nginx+vue+webpack配置二级域名
web_1993的博客
03-16 1839
⚠️：文中的demourl指的是二级文件的名称 1.修改生成文件中的路径 config/index.js文件 2.修改路由文件中的base 配置 3.修改nginx中的配置 4.在地址栏中输入地址即可 大功告成 配置完成后千万记得重启哦 ...
webpack依据不同的文件类型配置不同的域名
xiaoxiaofly的博客
10-22 459
问题背景，有时候需要将打包结果根据不同的文件类型配置不同的publicPath 比如js、css、fonts、png单独配置不同的域名 module.exports = { // publicPath: '/', publicPath: process.env.NODE_ENV === 'production' ? `//j1${cdnPrev}` : '/', pluginOptions: { publicPath: { css: pro.
webpack：:scroll:一些节点教程-《 Webpack学习笔记》
02-06
Webpack 是一个流行的模块...通过《Webpack学习笔记》这样的教程，你可以逐步掌握Webpack的基础和进阶用法，将其有效地应用于项目中，实现高效、模块化的前端开发。在学习过程中，不断实践和查阅官方文档是至关重要的。
webpack 零基础入门教程.zip
11-01
2. **输出（Output）**：指定Webpack打包后的文件输出位置和文件名，包括主bundle和其他chunk。 3. **模块（Module）**：Webpack 把所有资源都视为模块，每个模块都有自己的唯一标识符。 4. **加载器（Loaders）**...
学习webpack的笔记，基于webpack5.zip
最新发布
02-19
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同...
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
webpack打包基础知识点与es6知识点.xmind
11-12
webpack打包基础知识点,各种插件和加载器，方便了webpack打包，es6的重要知识点总结，加油。
vue项目中运用webpack动态配置打包多种环境域名的方法
10-16
本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。需要的朋友跟随小编一起看看吧
# webpack 打包工具（vue）
djj1220的博客
03-02 388
vue-webpack 打包工具 我的github iSAM2016 不是教程，是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js 一开始在接触webpack 的时候，简直痛不欲生，现在回头看，做个注释， 当然参考了很多文章。这是一个关于vue 开发的webpack 架构会列举出来 webp...
webpack详细配置
weixin_49173037的博客
04-23 543
1、entry entry: 入口起点 1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 --> 只有
webpack构建的项目配置ip运行地址
你猜我猜不猜
04-01 7328
我们平常在做vue或者react项目时，往往会使用脚手架直接搭建，有些脚手架会封装好使用本地的ip进行项目的访问，但是有些时候我们使用npm run dev或者npm start运行项目，发现只有localhost:8080类似的访问地址，这个时候如果我们有额外的需求，不如用手机来访问看看效果，会发现localhost这个地址是生成不了二维码的，这个时候我们就需要自己动手去配置。目前我所了解的方式...
js获取页面完整域名结合webpack的应用
qlin_11的博客
02-05 237
js获取页面完整域名 window.location.protocol+"//"+window.location.host webpack的配置： output: { // filename:'[name].[chunkhash:8].js', filename: "bundle.js", chunkFilename: "[name].js", // publicPath在使用server不同时需要进行配置，针对server的ip和端口。 // DI中使用host
js快速获取当前链接和域名
故里的博客
01-08 1273
js快速获取当前链接和域名
JavaScript获取完整当前域名
热门推荐
u013746071的专栏
10-12 7万+
window.location.protocol+"//"+window.location.host; // 返回https://mp.csdn.net window.location.host; //返回url 的主机部分，例如：mp.csdn.net window.location.hostname; //返回mp.csdn.net window.location.href; //返...
（四）vue.js 外部配置文件（参考）
dazhuanqi8386的博客
11-10 1229
前文我们已经安装了axios，现在我们来配置外部文件 1.在vue项目中的static目录下新增文件config.json { "apiUrl": "http://127.0.0.1:30010/support/" } 2.在main.js中引入axios，并定义一个全局函数来获取配置文件 import axios from 'axios'Vue.prot...
webpack-dev-server 的 host 配置 0.0.0.0
慢慢来吧，都会有的。
02-11 2150
webpack devserver的host配置0.0.0.0
webpack 笔记
10-11
好的，关于 webpack 的笔记，我可以提供以下内容： Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它是一个模块打包工具，可以将多个模块打包成一个文件，以便在浏览器中使用。 Webpack 的核心概念是“入口”和“出口”。入口是指 Webpack 打包的起点，出口则是指打包后的文件输出路径和文件名。 Webpack 还支持各种各样的 loader 和 plugin，用于处理各种不同类型的文件和任务，例如处理 CSS、图片、压缩代码等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值