Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Fahami secara ringkas proses pembungkusan webpack
Fahami secara ringkas proses pembungkusan webpack
- WBOYke hadapan
- 2022-08-09 09:52:061616semak imbas
Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu yang berkaitan dengan proses pembungkusan webpack ialah alat pembungkusan modul statik untuk aplikasi JavaScript moden. Mari kita lihat, saya harap ia akan membantu semua orang.
[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]
pek web : Merupakan alat pembungkusan modul statik untuk aplikasi JavaScript moden. Apabila pek web memproses aplikasi, ia secara dalaman membina graf pergantungan daripada satu atau lebih titik masuk dan kemudian menggabungkan setiap modul yang diperlukan dalam projek anda menjadi satu atau lebih himpunan, semuanya adalah sumber statik yang digunakan untuk memaparkan kandungan anda.
WebPack boleh dilihat sebagai pembungkus modul: apa yang dilakukannya ialah menganalisis struktur projek anda, mencari modul JavaScript dan bahasa sambungan lainyang penyemak imbas tidak boleh dijalankan secara langsung (Sass, TypeScript, dll.), dan Tukar dan bungkus ke dalam format yang sesuai untuk digunakan oleh penyemak imbas. Selepas kemunculan 3.0, Webpack juga mengambil tanggungjawab untuk mengoptimumkan projek.
Terdapat tiga perkara penting dalam perenggan ini:
Pembungkusan: Berbilang fail Javascript boleh dibungkus ke dalam satu fail untuk mengurangkan tekanan pelayan dan memuat turun lebar jalur.
Penukaran: Tukar bahasa lanjutan kepada JavaScript biasa untuk membolehkan penyemak imbas berjalan dengan lancar.
Pengoptimuman: Apabila bahagian hadapan menjadi semakin kompleks, prestasi juga akan menghadapi masalah, dan WebPack juga telah mula memikul tanggungjawab untuk mengoptimumkan dan meningkatkan prestasi
1 Buat projek baharu, dan kemudian laksanakan
npm init
2. Pasang webpack dan webpack-cil secara global
npm install -g webpack npm install -g webpack-cil
3. Pasang pek web pada kebergantungan projek, supaya anda boleh menggunakan pek web versi tempatan
npm install webpack -save-dev npm install webpack-cil -save-dev
4 .js , tukar tetapan lalai
Fungsi: untuk kemudahan, anda tidak perlu memasukkan alamat direktori setiap kali anda membungkus, tetapi hanya webpack terus
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 Pemasangan
Pemalam ini akan menjana fail HTML5 untuk anda dan menggunakan teg script dalam badan untuk memperkenalkan semua himpunan yang dijana pek web anda. Hanya tambahkan pemalam pada konfigurasi pek web anda
npm install --save-dev html-webpack-plugin
6. Pasang CopyWebpackPlugin
Pemalam ini membungkus dan menyalin fail yang diperlukan kepada apa yang anda perlukan Sebab mengapa saya memasang pemalam ini adalah kerana selepas saya membungkus pakej, css tidak berjaya dibungkus saya mencuba banyak kaedah tetapi masih gagal saya hanya boleh melaksanakan ini secara manual dan menyalin pakej css
npm install copy-webpack-plugin --save-dev // 安装
// Menggunakan. dari dan ke adalah untuk menyalin fail dalam lokasi borang ke lokasi ke
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
{ from: "other", to: "public" },
],
}),
],
}; // webpack.config.js
7 Dua kaedah pembungkusan
webpack --mode development // 开发模式 不压缩 webpack --mode production // 生产模式 压缩
8. Pasang webpack-dev-server
npm install --save-dev webpack webpack-dev-server
const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
9. Selepas pembungkusan, mulakan projek:
"scripts": {
"test": "mocha",
"start": "webpack-dev-server",
"dev": "webpack --mode development"
},// 在package.json 里面进行配置
// 然后执行
npm run start // 项目启动&热更新
npm run dev // 再次打包
npm run test // 执行测试
[Cadangan berkaitan: javascript tutorial video, bahagian hadapan web]
Atas ialah kandungan terperinci Fahami secara ringkas proses pembungkusan webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!