webpack基础配置

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

目前的打包工具有很多：Grunt，Gulp,Parcel,Webpack,Vite等等

 一、基本使用

 webpack 中文官网

webpack  是一个静态资源打包工具

它会以一个或者多个文件作为打包的入口，将我们整个项目所有文件编译成一个或者多个文件输出。输出的文件就是编译好的文件，就可以在浏览器端直接运行了。

我们将webpack 输出的文件叫做 bundle 。

1.功能

Webpack 本身的功能是很有限的，

• 开发模式：仅能编译 JS 中的 ES Module 语法
• 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码

1. 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 创建文件

• count.js

export default function count(x, y) {
  return x - y;
}

• sum.js

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

• main.js

import count from "./js/count";
import sum from "./js/sum";

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

3. 下载依赖

打开终端，来到项目根目录。运行以下指令：

• 初始化package.json

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

• 下载依赖

npm i webpack webpack-cli -D

4. 启用 Webpack

• 开发模式

npx webpack ./src/main.js --mode=development

• 生产模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

二、基本配置

1.五大核心

（1）entry（入口） 指示Webpack 从哪个文件开始打包，一般是从"./src/main.js" 文件开始打包，mian.js  文件中会引入其他资源

（2）output（输出）指示Webpack 打包完的文件输出到哪里，以及输出文件命名等；注意：输出文件要使用绝对路径；里面配置 输出路径 path 和 输出文件名 filename;

（3）loader（加载器）Webpack 本身只能处理js、json等资源，其他的资源比如 css，less，bable，image等等需要借助loader，才能解析；

（4）plug in（插件）扩展Webpack 的功能，比如ESlint 语法校验，css压缩和开启link引入样式，html打包等等；

（5）mode（模式）主要有两种：开发模式和生产模式 （development和production）

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

 三、处理样式资源

webpack 本身不能识别样式资源，需要借助loader 来解析样式资源；

1.处理CSS样式资源

1.1 下载包 (注意需要下载两个包 css-loader 和 style-loader)

npm i css-loader style-loader -D

1.2 两个loader 功能

• css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
• style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容此时样式就会以 Style 标签的形式在页面上生效

1.3 配置文件

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"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2. 处理Less/Sass/Styl 资源

2.1 下载包

npm i less-loader -D

2.2 功能

less-loader 负责将Less 文件编译成CSS文件

3.3 配置

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: /\.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",
};