웹팩 패키징 프로세스를 간략하게 이해하세요.
- WBOY앞으로
- 2022-08-09 09:52:061563검색
이 글은 주로 웹팩 패키징 프로세스와 관련된 문제를 소개하는 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 // 执行测试
위 내용은 웹팩 패키징 프로세스를 간략하게 이해하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!