웹팩 패키징 프로세스를 간략하게 이해하세요.

이 글은 주로 웹팩 패키징 프로세스와 관련된 문제를 소개하는 javascript에 대한 관련 지식을 제공합니다. Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 패키징 도구입니다. 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

webpack: 최신 JavaScript 애플리케이션을 위한 정적 모듈 패키징 도구입니다. webpack은 애플리케이션을 처리할 때 내부적으로 하나 이상의 진입점에서 종속성 그래프를 구축한 다음 프로젝트에 필요한 모든 모듈을 하나 이상의 번들으로 결합합니다. 이는 콘텐츠를 표시하는 데 사용되는 정적 리소스입니다.

WebPack은 모듈 패키저로 볼 수 있습니다. 이 작업은 프로젝트 구조를 분석하고 브라우저가 직접 실행할 수 없는 JavaScript 모듈 및 기타 확장 언어(Sass, TypeScript 등)를 찾아 다음으로 변환하는 것입니다. 브라우저에서 사용하기에 적합한 형식으로 압축됩니다. 3.0이 등장한 이후 Webpack은 프로젝트 최적화의 책임도 맡게 되었습니다.

이 단락에는 세 가지 핵심 사항이 있습니다:

• 패키징: 여러 Javascript 파일을 하나의 파일로 패키징하여 서버 부담과 다운로드 대역폭을 줄일 수 있습니다.

• 변환: 브라우저가 원활하게 실행될 수 있도록 확장 언어를 일반 JavaScript로 변환합니다.

• 최적화: 프런트엔드가 점점 복잡해지면서 성능에도 문제가 생기기 시작했고, WebPack도 성능 최적화와 개선의 책임을 지기 시작했습니다

1. it

npm init

2. 전역적으로 webpack 및 webpack-cil을 설치합니다.

npm install -g webpack

npm install -g webpack-cil

3. webpack의 로컬 버전을 사용할 수 있도록 webpack을 설치합니다.

npm install webpack -save-dev

npm install webpack-cil -save-dev

4. .config .js, 기본 설정 변경

기능: 패키징할 때마다 디렉토리 주소를 입력할 필요 없이 바로 webpack을 직접 입력하는 편의를 위한 것입니다

const path = require('path');

const webpack = require('webpack');

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

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {

mode: 'development',

entry: './src/index.js', // 指定打包入口文件

output: {

filename: 'index.js', // 指定打包输出文件名

path: path.resolve(__dirname, './public'), // 指定打包输出路径

},

module: { // 对模块的处理逻辑

rules: [ // 一系列的加载器的处理逻辑

{

test: /\.css$/, // 正则 匹配到文件后缀

use: [

'style-loader',

'css-loader',

], // 用此加载器处理匹配到的文件

exclude: [ // 排除此文件夹下的文件

path.resolve(__dirname, './node_modules')

]

}

],

},

resolve: {

extensions: ['.js', '.json', '.jsx', '.css'] // 自动补全识别后缀

},

plugins: [

new HtmlWebpackPlugin({

template: './src/index.html',

minify: {

removeAttributeQuotes: true,

},

hash: true,

}),

new webpack.EnvironmentPlugin(

{

NODE_ENV: 'development',

TEST: 'true',

}

),

new CopyPlugin({

patterns: [

{from: path.resolve(__dirname, './src/index.css'), to: path.resolve(__dirname, './public')},

],

}),

],

// 配置webpack服务

devServer: {

port: 8000, // 启动服务监听端口

host: 'localhost', // 可以通过localhost访问

open: true, // 自动打开浏览器

hot: true, // 启动热更新

},

};

5. HtmlWebpackPlugin

이 플러그인을 설치하세요. in은 파일에 대한 HTML5를 생성합니다. 본문의 script 태그를 사용하여 모든 webpack 생성 번들을 소개합니다. 이 플러그인을 웹팩 구성에 추가하기만 하면 됩니다

npm install --save-dev html-webpack-plugin

6. CopyWebpackPlugin 설치

이 플러그인은 필요한 파일을 패키지화하여 필요한 위치에 복사합니다. 타이핑 패키지 후에 CSS가 성공적으로 패키징되지 않았습니다. 많은 방법을 시도했지만 여전히 실패했습니다. CSS 패키지를 과거에 복사하려면 수동으로만 실행할 수 있었습니다

npm install copy-webpack-plugin --save-dev // 安装

// from 및 to를 사용하여 form 위치를 to 위치로

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {

plugins: [

new CopyPlugin({

patterns: [

{ from: "source", to: "dest" },

{ from: "other", to: "public" },

],

}),

],

}; // webpack.config.js

7. 두 가지 패키징 방법

webpack --mode development // 开发模式 不压缩

webpack --mode production // 生产模式 压缩

8. webpack-dev-server 설치

npm install --save-dev webpack webpack-dev-server

const Webpack = require('webpack');

const WebpackDevServer = require('webpack-dev-server');

9. 패키징 후 프로젝트를 시작합니다:

"scripts": {

"test": "mocha",

"start": "webpack-dev-server",

"dev": "webpack --mode development"

},// 在package.json 里面进行配置

// 然后执行

npm run start // 项目启动&热更新

npm run dev // 再次打包

npm run test // 执行测试

javascript 비디오 튜토리얼, 웹 프론트엔드】

위 내용은 웹팩 패키징 프로세스를 간략하게 이해하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!