JavaScript webpack5 구성 및 사용에 대한 기본 소개

이 글은 javascript에 대한 관련 지식을 제공합니다. Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러(모듈 번들러)입니다. JavaScript webpack5의 구성 및 사용에 대한 기본 소개를 살펴보겠습니다. 모두에게 도움이 됩니다.

[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]

1. Webpack

1.1 소개

가장 독창적인 프론트엔드 개발에서는 js와 같은 파일을 도입했습니다. 인용 목적을 달성하기 위해 HTML에 스크립트와 링크 태그를 수동으로 삽입하는 것은 번거로울 뿐만 아니라 파일마다 별도의 요청이 필요하며 변수 충돌이 발생하기 쉽습니다.

그래서 JavaScript 모듈화 개념이 제안되었고, AMD, CommonJS, CMD, ES6 모듈화 등의 솔루션이 차례로 등장했습니다.

그러나 실제로 모듈식 개발을 사용하는 프로젝트는 브라우저에서 직접 실행할 수 없습니다. 예를 들어 많은 npm 모듈은 브라우저가 지원하지 않는 CommonJS 구문을 사용합니다.

모듈 패키징 도구가 나타날 때입니다. 이 도구의 임무는 모듈 간의 종속성을 해결하고 프로젝트를 브라우저가 인식할 수 있는 JS 파일로 패키징하는 것입니다.

현재 커뮤니티에서 널리 사용되는 패키징 도구로는 Webpack, Parcel, Rollup 등이 있습니다.

vue-cli나 create-ract-app 등의 스캐폴딩을 사용했다면 실제로는 webpack을 사용한 것입니다. 모두 webpack의 2차 패키징을 기반으로 하기 때문이므로 webpack의 원리를 마스터한다면 Vue를 더 잘 개발하고 엔지니어링 프로젝트에 반응할 수 있습니다.

1.2 다섯 가지 핵심 개념

프로젝트의 webpack 구성 파일은 루트 디렉터리에 있습니다: webpack.config.jswebpack.config.js

entry (入口)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，例如vue项目中的main.js就是打包时的入口文件。

module.exports = {
  entry: './src/main.js'
};

项目中的所有依赖都应该直接或者间接地与入口文件关联起来，例如我们都是在main.js中引入外部模块（axios、router、elementUI等）。

output (出口)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
  	//__dirname是当前目录根目录
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

• ouput的path属性决定了打包好的文件的生成位置，默认是./dist，如果没有，webpack会自动创建这个目录。
• ouput的filename属性决定了打包文件的名称。

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（例如图片，css文件、vue文件等，webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

module.exports = {
  //...
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader','css-loader'] }
    ]
  }
};

在 webpack 配置中定义 loader 时，要定义在 module.rules 中，其中test属性是需要匹配的文件名的正则，use属性是对应的loader，可以是多个（数组）。

例如上面的style-loader和css-loader就是处理js中引入的css文件（如果直接在js中引入css文件，是会报错的）。

plugin (插件)

oader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量，插件增强了webpack的功能。

要使用插件，对于webpack内置的插件，我们通过引入webpack然后直接访问内置插件即可，对于外部插件，我们需要先安装，然后require引入，然后在plugin数组引入插件（new）实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const config = {
  module: {
    rules: [
      //...
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

上面的html-webpack-plugin插件就是根据模板(template

entry(entry)

entry point(entry point)는 다음을 나타냅니다. 웹팩은 내부 종속성 그래프를 작성하기 위한 시작점이 되는 모듈을 사용해야 합니다. 예를 들어 vue 프로젝트의 main.js는 패키징 시 항목 파일입니다.

module.exports = {
  mode: 'production'
};

• 프로젝트의 모든 종속성은 항목 파일과 직접 또는 간접적으로 연결되어야 합니다. 예를 들어 main.js에 외부 모듈(axios, router, elementUI 등)을 도입합니다.
• output(출력)

output 속성은 webpack이 생성한 번들을 출력할 위치와 이러한 파일의 이름을 지정하는 방법을 알려줍니다. 기본값은 ./dist입니다.

var time = new Date();
var m = time.getMonth() + 1;
var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
module.exports = {
  now: t,
};

ouput의 경로 속성은 패키지 파일이 생성되는 위치를 결정합니다. 기본값은 ./dist입니다. 그렇지 않으면 webpack이 자동으로 이 디렉터리를 생성합니다.

출력의 파일 이름 속성은 패키지된 파일의 이름을 결정합니다.

loader

loader를 사용하면 webpack이 JavaScript가 아닌 파일(예: 이미지, CSS 파일, vue 파일 등, webpack 자체는 JavaScript만 이해함)을 처리할 수 있습니다.

loader는 모든 유형의 파일을 webpack이 처리할 수 있는 유효한 모듈로 변환할 수 있으며, 그런 다음 webpack의 패키징 기능을 사용하여 이를 처리할 수 있습니다.

import { now } from "../utils/time.js";
document.write("现在是: " + now);

웹팩 구성에서 로더를 정의할 때 module.rules에서 정의해야 합니다. 여기서 test 속성은 일치해야 하는 일반 파일 이름이고 use 속성은 해당 로더이며 여러(배열)일 수 있습니다. . 🎜🎜예를 들어 위의 스타일 로더와 CSS-로더는 js로 가져온 CSS 파일을 처리합니다(css 파일을 js에 직접 도입하면 오류가 보고됩니다). 🎜🎜plugin🎜🎜oader는 특정 유형의 모듈을 변환하는 데 사용되는 반면, 플러그인은 더 광범위한 작업을 수행하는 데 사용할 수 있습니다. 🎜🎜플러그인은 패키징 최적화 및 압축부터 환경 변수 재정의에 이르기까지 다양합니다. 플러그인은 웹팩의 기능을 향상시킵니다. 🎜🎜플러그인을 사용하려면 웹팩에 내장된 플러그인의 경우 웹팩을 가져와서 내장 플러그인에 직접 액세스할 수 있습니다. 외부 플러그인의 경우 먼저 설치한 후 필수로 사용해야 합니다. 그런 다음 플러그인 배열에 플러그인(새) 인스턴스를 도입합니다. 🎜

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "index.js",
  },
};

🎜위 html-webpack-plugin 플러그인은 템플릿(template) 페이지를 기반으로 패키징된 디렉터리에 해당 html 파일을 자동으로 생성하고, 패키징 및 js 생성을 위한 스크립트 태그를 자동으로 삽입합니다. 파일(일반 Webpack 패키징은 html 파일을 생성하지 않음) 🎜🎜모드(mode)🎜🎜🎜개발 모드: 패키징 속도와 코드 디버깅을 최적화합니다. 🎜🎜프로덕션 모드(프로덕션): 패키징 속도 최적화 및 코드 실행 성능 최적화🎜🎜🎜🎜🎜

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通过 npm 安装
module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "index.js",
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", scriptLoading: "blocking" })],
};

🎜즉, 패키징 모드가 다르면 웹팩의 패키징 코드 최적화 전략도 달라집니다. 🎜🎜2. 구성 및 사용🎜🎜 아주 간단한 웹팩 프로젝트를 만들어 보겠습니다. 🎜🎜프로젝트 구조🎜🎜🎜🎜

接着我们创建基本的项目结构和文件。

my-webpack-demo
    ├── src
    |    └── index.js（入口文件）
    ├── utils
    |    └── time.js（时间工具）
    ├── package-lock.json
    ├── package.json
    ├── webpack.config.js（webpack配置）

其中utils下的time.js负责生成当前时间 time.js:

var time = new Date();
var m = time.getMonth() + 1;
var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
module.exports = {
  now: t,
};

入口文件index.js:

import { now } from "../utils/time.js";
document.write("现在是: " + now);

webpack配置文件webpack.config.js:

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "index.js",
  },
};

我们在终端执行打包命令：

此时webpack自动在项目中创建了dist目录，并生成了打包好的index.js文件，那么我们如何验证index.js文件是否有效呢？

使用html-webpack-plugin

由于webpack并不会自动生成html文件，还记得上面的html-webpack-plugin插件吗？

通过npm安装：

在配置文件中引入：

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通过 npm 安装
module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "index.js",
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html", scriptLoading: "blocking" })],
};

记得在src下创建index.html模板：

欧克！我们再次执行打包命令npx webpack 。

可以看到，在dist目录下不仅生成了index.js，还有index.html，我们在浏览器中打开它。

time.js成功生效咯 ！

三、写在最后

我们完成了一个非常简单的webpack项目，你是否发现了这和vue项目的打包流程十分相似呢？

只是vue-cli的功能是十分强大的，例如可以解析vue文件，热更新等等……

所以这也验证了开始说的，vue-cli是对webpack的二次封装，封装了许多loader和plugin，并且配置好了入口，出口等配置信息，我们可以拿来就用。

【相关推荐：javascript视频教程、web前端】

위 내용은 JavaScript webpack5 구성 및 사용에 대한 기본 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!