【webpack】从零开始配置webpack系列(基础篇)_webpack (1)

于 2024-04-30 09:20:49 发布
阅读量685 收藏 20
点赞数 17
分类专栏： 程序员 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84181286/article/details/138335030
版权 
    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"],
  },
],

},
plugins: [],
mode: “development”,
};


添加 Styl 资源


* src/styl/index.styl

/* 可以省略大括号、分号、冒号 */
.box
width 100px
height 100px
background-color pink


* src/main.js

import { add } from “./math”;
import count from “./js/count”;
import sum from “./js/sum”;
// 引入资源，Webpack才会对其打包
import “./css/index.css”;
import “./less/index.less”;
import “./sass/index.sass”;
import “./sass/index.scss”;
import “./styl/index.styl”;

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));


* public/index.html
webpack5

Hello Webpack5


  

### 5.更多CSS处理


#### 提取 Css 成单独文件


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


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


**我们应该是单独的 Css 文件，通过 link 标签加载性能才好**


下载包

npm i mini-css-extract-plugin -D


配置


* webpack.prod.js

const path = require(“path”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

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: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 105: …oader"], }̲, { …/,
use: [MiniCssExtractPlugin.loader, “css-loader”, “less-loader”],
},
{
test: /.s[ac]ssKaTeX parse error: Expected 'EOF', got '}' at position 83: …oader"], }̲, { …/,
use: [MiniCssExtractPlugin.loader, “css-loader”, “stylus-loader”],
}
]
},
plugins: [
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”,
};


  

#### Css 兼容性处理


下载包

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


配置


* webpack.prod.js

const path = require(“path”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

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: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 389: … ], }̲, { …/,
use: [
MiniCssExtractPlugin.loader,
“css-loader”,
{
loader: “postcss-loader”,
options: {
postcssOptions: {
plugins: [
“postcss-preset-env”, // 能解决大多数样式兼容性问题
],
},
},
},
“less-loader”,
],
},
{
test: /.s[ac]ssKaTeX parse error: Expected 'EOF', got '}' at position 377: … ], }̲, { …/,
use: [
MiniCssExtractPlugin.loader,
“css-loader”,
{
loader: “postcss-loader”,
options: {
postcssOptions: {
plugins: [
“postcss-preset-env”, // 能解决大多数样式兼容性问题
],
},
},
},
“stylus-loader”,
]
}
]
},
plugins: [
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”,
};


控制兼容性


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

{
// 其他省略
“browserslist”: [“ie >= 8”]
}


以上为了测试兼容性所以设置兼容浏览器 ie8 以上。


实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

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


合并配置


* webpack.prod.js

const path = require(“path”);
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: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 79: …aders(), }̲, { …/,
use: getStyleLoaders(“less-loader”),
},
{
test: /.s[ac]ssKaTeX parse error: Expected 'EOF', got '}' at position 55: …oader"), }̲, { …/,
use: getStyleLoaders(“stylus-loader”),
}
]
},
plugins: [
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”,
};


  

#### Css 压缩


下载包

npm i css-minimizer-webpack-plugin -D


配置


* webpack.prod.js

const path = require(“path”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
const CssMinimizerPlugin = require(“css-minimizer-webpack-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: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 79: …aders(), }̲, { …/,
use: getStyleLoaders(“less-loader”),
},
{
test: /.s[ac]ssKaTeX parse error: Expected 'EOF', got '}' at position 55: …oader"), }̲, { …/,
use: getStyleLoaders(“stylus-loader”),
}
]
},
plugins: [
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, “…/public/index.html”),
}),
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: “static/css/main.css”,
}),
// css压缩
new CssMinimizerPlugin(),
],
// devServer: {
// host: “localhost”, // 启动服务器域名
// port: “3000”, // 启动服务器端口号
// open: true, // 是否自动打开浏览器
// },
mode: “production”,
};


  

### 6.处理 js 资源


有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？


**原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。**


**其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。**


* 针对 js 兼容性处理，我们使用 Babel 来完成
* 针对代码格式，我们使用 Eslint 来完成


我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理


  

#### Eslint


可组装的 JavaScript 和 JSX 检查工具。


这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能


我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查


配置文件


配置文件由很多种写法：


* ```
.eslintrc.*

：新建文件，位于项目根目录

+ `.eslintrc`
+ `.eslintrc.js`
+ `.eslintrc.json`
+ 区别在于配置格式不一样
  • package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

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

具体配置

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

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
};
  1. parserOptions 解析选项
parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}
  1. rules 具体规则
  • "off" 或 0 - 关闭规则
  • "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 除了少数情况下不会有警告
  ],
}
  1. extends 继承

开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

现有以下较为有名的规则：

// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};
在 Webpack 中使用
  1. 下载包
npm i eslint-webpack-plugin eslint -D
  1. 定义 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 定义变量
  },
};
  1. 修改 js 文件代码
  • main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

var result1 = count(2, 1);
console.log(result1);
var result2 = sum(1, 2, 3, 4);
console.log(result2);
  1. 配置
  • webpack.config.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-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: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      }
    ]
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};
VSCode Eslint 插件

打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决

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

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

  • .eslintignore
# 忽略dist目录下所有文件
dist
Babel

JavaScript 编译器。

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

配置文件

配置文件由很多种写法：

babel.config.*

 ：新建文件，位于项目根目录


	+ `babel.config.js`
	+ `babel.config.json`
* ```
.babelrc.*

：新建文件，位于项目根目录

+ `.babelrc`
+ `.babelrc.js`
+ `.babelrc.json`
  • package.json 中 babel：不需要创建文件，在原有文件基础上写

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

具体配置

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

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

简单理解：就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  • @babel/preset-react：一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript：一个用来编译 TypeScript 语法的预设
在 Webpack 中使用
  1. 下载包
npm i babel-loader @babel/core @babel/preset-env -D
  1. 定义 Babel 配置文件
  • babel.config.js
module.exports = {
  presets: ["@babel/preset-env"],
};
  1. 修改 js 文件代码
  • main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
  1. 配置
  • webpack.config.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-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: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.js$/,
        exclude: /node\_modules/,
        use: {
            loader: 'babel-loader',
            options: {
            	presets: ['@babel/preset-env']
            }
        }
      }
    ]
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

7.处理字体图标资源

添加字体图标资源
  • src/fonts/iconfont.ttf
  • src/fonts/iconfont.woff
  • src/fonts/iconfont.woff2
  • src/css/iconfont.css
    • 注意字体文件路径需要修改
  • src/main.js
import { add } from "./math";
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
  • public/index.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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <!-- 使用字体图标 -->
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
    <script src="../dist/static/js/main.js"></script>
  </body>
</html>
配置
const path = require("path");

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: ["style-loader", "css-loader"],
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

type: "asset/resource"和type: "asset"的区别：

  1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
  2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

8.处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

配置
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};
添加图片资源
  • src/images/1.jpeg
  • src/images/2.png
  • src/images/3.gif
使用图片资源
  • src/less/index.less
.box2 {
  width: 100px;
  height: 100px;
  background-image: url("../images/1.jpeg");
  background-size: cover;
}
  • src/sass/index.sass
.box3
  width: 100px
  height: 100px
  background-image: url("../images/2.png")
  background-size: cover
  • src/styl/index.styl
.box5
  width 100px
  height 100px
  background-image url("../images/3.gif")
  background-size cover
输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源

因为 Webpack 会将所有打包好的资源输出到 dist 目录下

  • 为什么样式资源没有呢？

因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来

对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式（Base64 格式）

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 \* 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
  plugins: [],
  mode: "development",
};

9.开发模式与生产模式介绍

开发模式

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

  1. 编译代码，使浏览器能识别运行：开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
  2. 代码质量检查，树立代码规范：提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
生产模式

生产模式是开发完成代码后，我们需要得到代码将来部署上线。

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

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

  1. 优化代码运行性能
  2. 优化代码打包速度
文件目录
├── 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 (包的依赖管理配置文件)
修改 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
修改 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: {
    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: "production",
};

运行生产模式的指令：

npx webpack --config ./config/webpack.prod.js
配置运行指令

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

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

[hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: “static/imgs/[hash:8][ext][query]”,
},
},
{
test: /.(ttf|woff2?)KaTeX parse error: Expected 'EOF', got '}' at position 131: … }, }̲, { …/,
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: “production”,
};


运行生产模式的指令：

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


  

#### 配置运行指令


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




[外链图片转存中...(img-OBkn8u1G-1714440011244)]
[外链图片转存中...(img-UPgk21Ko-1714440011244)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84181286
关注
  • 17
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ltadpoles#web-document#webpack基础配置1
07-25
前言虽然一直在接触 webpack ，不过都是在项目开发时遇到问题去看看文档，并没有系统化地学习、消化。这篇文章将从 webapck 最基本的配置开始说起，直到
浅谈react+es6+webpack的基础配置
08-29
下面小编就为大家带来一篇浅谈react+es6+webpack的基础配置。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【webpack】从零开始配置webpack系列(基础篇)_webpack
最新发布
m0_73143885的博客
04-27 871
开发模式顾名思义就是我们开发代码时使用的模式。编译代码，使浏览器能识别运行：开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源代码质量检查，树立代码规范：提前检查代码的一些隐患，让代码运行时能更加健壮。提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
Webpack5 搭建开发服务器
weixin_52053631的博客
03-12 92
Webpack5 搭建开发服务器
webpack项目配置
suuntil的博客
11-13 763
webpack项目配置
webpack超详细，超规范，超炫酷
weixin_62981580的博客
12-23 1462
通过上述内容，你可以更全面地了解到 Webpack 在实际项目中的应用。它可以帮助你完成快速搭建本地开发环境、优化生产环境构建等任务、以及上面提到的注意点。希望这些信息能够帮助到你，提高项目的开发效率和性能。
webpack使用教程（二）
sodakii的博客
09-26 984
1.基本配置以及应用。
使用webpack 4打包使用—基础篇
01-08
webpack 4打包使用—基础篇 文章目录webpack 4打包使用—基础篇全局安装webpack4打包项目webpack-dev-serverwebpack-dev-server 的命令参数 全局安装webpack4 npm i webpack -g npm i webpack-cli -g webpack4在...
webpack-4-go:Webpack-4-从零开始实战手册（基础篇）
03-11
Webpack-4-从零开始实战手册（基础篇） 前言： 2018年2月底的WebPack维护团队发布了 。其中移除了像CommonsChunkPlugin ，预设支援mode模式切换等改动进而比起webpack3打包速度有大大的提升。如果你对的WebPack还很...
vue-cli webpack配置文件分析
12-09
今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。 说明 此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以从后面提到的入口文件开始查看。 ...
webpack学习笔记
weixin_39848527的博客
09-02 966
webpack可以做什么事情? webpack能够处理Js文件的互相依赖关系; webpack能够处理js的兼容问题
webpack配置与打包优化
hjdjhh的博客
12-30 2097
什么是跨域 浏览器，端口，域名有一项不同就会产生跨域 解决跨域 先在vue脚手架的根目录下创建 vue.congif.js 文件 vue的脚手架会自动进行webpack配置，而vue.congif.js 文件就是进行修改默认的该配置的 配置的思路 创建vue.congif.js 文件，里面的devServer 是进行开发环境的服务器配置的，里面有proxy是用来 进行代理的转发，在proxy里的 target 设置转发的网址 跨域转发 因为跨域的问题，axios是无法请求...
2018-9-11-webpack.config.js 里面配置启动参数
养柱
09-11 798
  devServer: { host: '127.0.0.1', port: 8010, //这个是前端访问的端口号 open: true, proxy: { '/loan': { target: 'http://localhost:8080', //这个配置的是 tomcat 里面 ...
webpack将端口号http://localhost:8080/ 改成本机IP地址:192.168.1.103:8080/，在局域网内访问，方法如下：
热门推荐
麻球科技
03-13 2万+
找到config文件下的index.js 将host: 'localhost', // can be overwritten by process.env.HOST 改为：host: '192.168.1.103', // can be overwritten by process.env.HOST即可，在浏览器输入192.168.1.103:8080/即可访问...
webpack相关配置步骤
wk494629875的博客
03-22 523
webpack简介webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；webpack安装方式1.运行npm i webpack -g,全局安装webpack配置文件简化打包1. npm init -y 先进行初始化 2. npm i webpack -D // npm i webpack-cli -D //如果npm版本是4,需要配置此项 ...
webpack常见的配置项
weixin_33816946的博客
07-13 1655
  使用vue init webpack test(项目文件夹名)命令初始化一个vue项目，cd test，然后安装依赖npm install之后会生成一些默认的文件夹和文件，这些文件和文件夹中有些和配置有关的。如果去专门的了解webpack一定会云里雾里，这里简单说明一下常用的配置。 1.babelrc文件 这个文件放在根目录下面设置转码规则的。例如要想在代码中使用es6，就要在这个文件中...
webpack从零开始配置
weixin_45835771的博客
06-07 534
构建脚手架底层能力
webpack 配置IP 和端口号
weixin_33845881的博客
02-18 1712
最近在用webpack搭建本地服务器的时候，因为不想总是用localhost来跑，所以对webpack.config.js进行了配置，如下 devServer: { //publicPath: '/dist/', host: '192.168.0.104', inline: true, port: 8090, colors: true }, 打开如下图： 转载于:https://...
使用webpack5从0配置eslint
06-02
接下来，你需要在你的webpack配置文件中添加以下loader配置： ```javascript module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'], }, ], }, ``` 然后...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值