1.
รายการสั่งให้ WebPack ใช้ไฟล์ที่เป็นจุดเริ่มต้นในการเริ่มต้นบรรจุภัณฑ์วิเคราะห์และสร้างกราฟการพึ่งพาภายใน
2.
เอาต์พุตจะสั่งให้ webpack ทราบตำแหน่งที่จะเอาต์พุตบันเดิลทรัพยากรที่แพ็กเกจไว้ และวิธีการตั้งชื่อ
3. Loader
webpack สามารถเข้าใจเฉพาะไฟล์ JavaScript และ JSON ซึ่งเป็นความสามารถในตัวของ webpack ที่พร้อมใช้งานทันที ตัวโหลดช่วยให้ webpack ประมวลผลไฟล์ประเภทอื่นและแปลงเป็นโมดูลที่ถูกต้องซึ่งแอปพลิเคชันสามารถใช้ได้และเพิ่มลงในกราฟการพึ่งพา
4.
ปลั๊กอินปลั๊กอินสามารถใช้เพื่อทำงานที่หลากหลายยิ่งขึ้น ปลั๊กอินมีตั้งแต่การเพิ่มประสิทธิภาพบรรจุภัณฑ์และการบีบอัด ไปจนถึงการกำหนดตัวแปรในสภาพแวดล้อมใหม่
5. โหมดโหมด
(โหมด) สั่งให้ WebPack ใช้การกำหนดค่าของโหมดที่เกี่ยวข้อง
มาแนะนำรายละเอียดเกี่ยวกับแนวคิดหลักห้าประการของ WebPack
รายการถูกใช้โดย WebPack เพื่อค้นหาเริ่มต้นและสร้างชุด รายการเป็นจุดเริ่มต้นของแอปพลิเคชัน หากคุณผ่านอาร์เรย์แต่ละรายการในอาร์เรย์จะถูกดำเนินการ จุดเริ่มต้นระบุว่าเว็บแพ็คโมดูลใดที่ควรใช้เพื่อเริ่มสร้างกราฟการพึ่งพาภายใน หลังจากเข้าสู่จุดเริ่มต้น WebPack จะตรวจสอบว่าโมดูลและไลบรารีใดจุดเริ่มต้นขึ้นอยู่กับ (โดยตรงและโดยอ้อม)
กฎง่ายๆ: ทุกหน้า HTML มีจุดเริ่มต้น แอปพลิเคชันหน้าเดียว (SPA): จุดเริ่มต้นเดียว แอปพลิเคชันหลายหน้า (MPA): จุดเริ่มต้นหลายจุด
ค่าเริ่มต้นคือ ./src/index.js แต่คุณสามารถระบุจุดเข้า (หรือจุด) อื่นได้โดยการกำหนดค่า entry รายการในการกำหนดค่า webpack ตัวอย่างเช่น:
//รายการเดียว--สตริง module.exports = {
รายการ: './path/to/my/entry/file.js',
-
//หลายรายการ--array module.exports = {
รายการ: ['./src/index.js', './src/add.js']
-
//หลายรายการ--วัตถุ module.exports = {
รายการ: {
หน้าแรก: './home.js',
เกี่ยวกับ: './about.js',
ติดต่อ: './contact.js'
-
}; ประเภทค่าของรายการ:
สตริง: รายการเดียว, บรรจุเพื่อสร้างก้อนและไฟล์หนึ่งชุดเดียวจะถูกส่งออกในตอน
ท้าย ฟอร์มหนึ่งก้อนในตอนท้าย โดยทั่วไปจะใช้เฉพาะในฟังก์ชั่น HMR เพื่อให้ HTML Hot Update
Object มีประสิทธิภาพ: หลายรายการซึ่งเป็นชิ้นจำนวนมากเช่นเดียวกับคีย์และไฟล์มัดจำนวนมากจะถูกส่งออกและแต่ละคีย์ (คีย์) จะเป็นชื่อของก้อน ในประเภทอ็อบเจ็กต์ ค่าของแต่ละคีย์สามารถเป็นอาร์เรย์ได้ ไม่ใช่เพียงสตริง
output สั่งให้ webpack ทราบวิธีการส่งออกและตำแหน่งที่จะส่งออกชุดรวม เนื้อหา และแพ็คเกจอื่น ๆ ที่คุณจัดทำแพ็คเกจหรือสิ่งใด ๆ ที่โหลดโดยใช้ webpack . ค่าเริ่มต้นของมัดเอาต์พุตคือ ./dist/main.js และไฟล์ที่สร้างขึ้นอื่น ๆ จะถูกวางไว้ในโฟลเดอร์ ./dist โดยค่าเริ่มต้น
คุณสามารถกำหนดค่ากระบวนการเหล่านี้ได้โดยการระบุฟิลด์ output ในการกำหนดค่า:
//webpack.config.js
เส้นทาง const = ต้องการ ('เส้นทาง');
โมดูล.ส่งออก = {
รายการ: './path/to/my/entry/file.js',
เอาท์พุท: {
เส้นทาง: path.resolve(__dirname, 'dist'),
ชื่อไฟล์: 'my-first-webpack.bundle.js',
-
}; เราสามารถบอกได้ว่า Webpack ชื่อของชุดและที่รวมกันของมัดผ่าน output.filename คุณสมบัติ filename และ output.path
2.1.output.filename (ชื่อไฟล์และไดเร็กทอรี)
ตัวเลือกนี้จะกำหนดไดเร็กทอรีและชื่อของแต่ละเอาต์พุตบันเดิล การรวมกลุ่มเหล่านี้จะถูกเขียนไปยังไดเรกทอรีที่ระบุโดยตัวเลือก output.path
สำหรับจุด入口ต้นเดียวชื่อไฟล์จะเป็นชื่อคงที่ อย่างไรก็ตาม เมื่อสร้างหลายบันเดิลผ่านจุดเข้าใช้งานหลายจุด การแยกโค้ด หรือปลั๊กอินต่างๆ ควรใช้วิธีการอื่นเพื่อให้แต่ละบันเดิลมีชื่อเฉพาะ
//รายการเดียว:
โมดูล.ส่งออก = {
-
เอาท์พุท: {
ชื่อไฟล์: 'js/bundle.js'
-
-
//หลายรายการ--ใช้ชื่อรายการ:
โมดูล.ส่งออก = {
-
เอาท์พุท: {
ชื่อไฟล์: '[ชื่อ].bundle.js'
-
-
// หลายรายการ - ใช้แฮชที่ไม่ซ้ำกันเพื่อสร้างโมดูล exports = {ในแต่ละกระบวนการสร้าง
-
เอาท์พุท: {
ชื่อไฟล์: '[ชื่อ].[แฮช].bundle.js'
-
-
... 2.2.output.path (ไดเร็กทอรีไฟล์)
output.path ระบุไดเร็กทอรีของไฟล์เอาต์พุตทั้งหมดซึ่งเป็นไดเร็กทอรีทั่วไปสำหรับเอาต์พุตทรัพยากรในอนาคตทั้งหมด เส้นทางจะต้องเป็นเส้นทางที่แน่นอน
โมดูล.ส่งออก = {
-
เอาท์พุท: {
เส้นทาง: path.resolve(__dirname, 'dist/assets')
-
}
;
2.3
มันไม่ส่งผลกระทบต่อเส้นทางของไฟล์ที่สร้างขึ้นแทน
ตัวอย่าง:
ในการกำหนดค่า WebPack ที่สร้างโดย Vue-CLI ค่าของ PublicPath ในสภาพแวดล้อมการผลิตเริ่มต้นเป็น '/' ซึ่งเป็นไดเรกทอรีรากของไดเรกทอรีปัจจุบัน
หลังจากบรรจุภัณฑ์เราเปิดไฟล์ HTML และเราจะเห็นได้ว่าเส้นทางทรัพยากรที่แนะนำในไฟล์ HTML คือ:
อย่างที่คุณเห็น มีการเพิ่มสัญลักษณ์ / ไว้ด้านหน้าเส้นทาง เมื่อเราเปิดเบราว์เซอร์เพื่อเข้าถึงไฟล์ html ที่สร้างขึ้น เราจะพบข้อผิดพลาด ไม่สามารถเข้าถึงทรัพยากรได้และมีการรายงานรายงาน 404 ในขณะนี้ การเข้าถึงทรัพยากรจะคล้ายกับดังต่อไปนี้:
อาจเป็นดังนี้บนเซิร์ฟเวอร์ แต่อาจมีปัญหาในการเข้าถึง
เราสามารถเปลี่ยน PublicPath เป็นเส้นทางที่สัมพันธ์กันหรือแสดงความคิดเห็นโดยตรง
2.3.1 ความแตกต่างระหว่างพาธและพาธสาธารณะ
打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。2.4. output.CHUNKFILENAME (ชื่อของการไม่เข้า)
เอาต์พุต chunkfilename กำหนดชื่อของไฟล์ที่ไม่ใช่รายการ นั่นคือนอกเหนือจากชิ้นที่สร้างขึ้นโดยไฟล์รายการแล้วไฟล์ก้อนที่สร้างขึ้นโดยไฟล์อื่น ๆ นั้นมีชื่ออยู่
โมดูล.ส่งออก = {
-
เอาท์พุท: {
chunkfilename: 'js/[name] _chunk.js' // ชื่อของ non-entry chunk}
}; webpack สามารถจัดทำแพ็กเกจไฟล์ JavaScript และ JSON ได้เท่านั้น ( webpack3+和webpack2+ มีการประมวลผลไฟล์ JSON ในตัว แต่ webpack1+并不支持， จำเป็นต้องแนะนำ json-loader ) นี่คือความสามารถในตัวของ webpack พร้อมใช้งานทันที ตัว Webpack เองไม่รองรับการรวมไฟล์ประเภทอื่น เช่น CSS, Vue ฯลฯ แต่เราสามารถใช้ตัวโหลดต่างๆ เพื่อให้ webpack ประมวลผลไฟล์ประเภทเหล่านี้ได้ ตัวโหลดสามารถแปลงไฟล์จากภาษาต่าง ๆ (เช่น TypeScript) เป็น JavaScript หรือแปลงรูปภาพอินไลน์เป็น URL ข้อมูล ตัวโหลดยังอนุญาตให้คุณ import ไฟล์ CSS โดยตรงในโมดูล JavaScript!
ด้วยการใช้ loader ที่แตกต่างกัน webpack มีความสามารถในการเรียกสคริปต์ภายนอกหรือเครื่องมือในการประมวลผลไฟล์ในรูปแบบที่แตกต่างกันเช่นการวิเคราะห์และแปลง SCSS เป็น CSS หรือแปลงไฟล์ JS รุ่นต่อไป (ES6, ES7) เป็นไฟล์ JS ที่เข้ากันได้ สำหรับการพัฒนา React ตัวโหลดที่เหมาะสมสามารถแปลงไฟล์ JSX ที่ใช้ในการตอบสนองเป็นไฟล์ JS
ในการกำหนดค่า webpack ตัวโหลดมีสองแอตทริบิวต์:
แอตทริบิวต์ test ซึ่งระบุว่าไฟล์ใดจะถูกแปลง
แอตทริบิวต์ use จะกำหนดตัวโหลดที่ควรใช้เมื่อทำการแปลง
include/exclude（可选）： เพิ่มไฟล์ (โฟลเดอร์) ด้วยตนเองที่ต้องประมวลผลหรือบล็อกไฟล์ (โฟลเดอร์) ที่ไม่จำเป็นต้องดำเนินการ
query（可选） : ระบุตัวเลือกการตั้งค่าเพิ่มเติมสำหรับตัวโหลด
// ตัวอย่าง: webpack.config
เส้นทาง const = ต้องการ ('เส้นทาง');
โมดูล.ส่งออก = {
เอาท์พุท: {
ชื่อไฟล์: 'my-first-webpack.bundle.js',
-
โมดูล: {
กฎ: [
{test: /.txt$/, loader: 'raw-loader'},
{ทดสอบ: /.css$/, ใช้: ['style-loader', 'css-loader']} // ถ้าคุณใช้ตัวโหลดหลายตัวคุณควรใช้ใช้
-
-
}; ในการกำหนดค่าข้างต้นแอตทริบิวต์ rules จะถูกกำหนดไว้สำหรับวัตถุโมดูลแยกต่างหากซึ่งมีแอตทริบิวต์ที่จำเป็นสองอย่างคือ test และ use สิ่งนี้เทียบเท่ากับการบอก WebPack Compiler ว่าเมื่อพบเส้นทางที่แยกวิเคราะห์เป็น '.txt' ในคำสั่ง require() / import ใช้ raw-loader เพื่อแปลงก่อนบรรจุภัณฑ์
หากคุณใช้ตัวโหลดหลายตัว คุณควรใช้ตัวโหลดในอาร์เรย์การใช้งานตามลำดับ: จากขวาไปซ้ายตามลำดับ ตัวอย่างเช่นในไฟล์ CSS ข้างต้น CSS-Loader แรกจะรวบรวมไฟล์ CSS ลงใน JS และโหลดลงในไฟล์ JS
3.1. CSS-loader
Webpack มีเครื่องมือสองอย่างสำหรับการประมวลผลสไตล์ชีต, css-loader และ style-loader ซึ่งจัดการงานที่แตกต่างกัน css-loader style-loader ให้คุณสามารถแนะนำไฟล์ CSS โดยใช้วิธีการที่คล้ายกับ import สามารถใส่ไฟล์ลงในไฟล์ JS ได้
// ติดตั้ง NPM Install-SAVE-DEV Style-Loader CSS-Loader // หากรุ่น CSS-Loader สูงเกินไปการรวบรวมอาจผิดพลาด
// ใช้ module.exports = {
-
โมดูล: {
กฎ: [
-
ทดสอบ: /(.jsx|.js)$/,
ใช้: {
ตัวโหลด: "Babel-Loader"
-
ยกเว้น: /node_modules/
-
-
ทดสอบ: /.css$/, // วิธีแนะนำตัวโหลดหลายตัวไปยังไฟล์เดียวกัน ลำดับของการกระทำของรถตักคือตัวโหลดในภายหลังเริ่มดำเนินการครั้งแรก: [
-
ตัวโหลด: "Style-Loader"
-
ตัวโหลด: "CSS-Loader"
-
-
-
-
-
}; สมมติว่ามีไฟล์ main.css:
body {
พื้นหลัง: สีเขียว;
} เพื่อให้ WebPack ค้นหาไฟล์ "main.css" เรานำเข้าสู่ "main.js" ดังนี้:
//main.js
นำเข้าปฏิกิริยาจาก 'ปฏิกิริยา';
นำเข้า {render} จาก 'react-dom';
นำเข้า Greeter จาก './Greeter';
นำเข้า ' ./main.css';//use
จำเป็นต้องนำเข้าไฟล์ CSS (<greeter/>, document.getElementById (' root '); จะถูกรวมเป็นไฟล์ css แยกกัน อย่างไรก็ตาม ด้วยการกำหนดค่าที่เหมาะสม webpack ยังสามารถรวม css ลงในไฟล์แยกกันได้
ใช้ในการแปลงโมดูลบางประเภท ในขณะที่ปลั๊กอินสามารถใช้เพื่อทำงานที่หลากหลายมากขึ้น ซึ่งรวมถึง: การเพิ่มประสิทธิภาพบรรจุภัณฑ์ การบีบอัด การจัดการทรัพยากร การอัดตัวแปรสภาพแวดล้อม เป็นต้น จุดประสงค์ของปลั๊กอินคือการแก้ปัญหาอื่น ๆ ที่ตัวโหลดไม่สามารถทำได้
ในการใช้ปลั๊กอินเราจำเป็นต้องติดตั้งผ่าน npm จากนั้นเพิ่มอินสแตนซ์ของปลั๊กอินภายใต้คุณสมบัติปลั๊กอิน เนื่องจากปลั๊กอินสามารถพกพาพารามิเตอร์/ตัวเลือกได้คุณต้องส่งอินสแตนซ์ new ไปยังคุณสมบัติ plugins ในการกำหนดค่า WebPack ปลั๊กอินส่วนใหญ่สามารถปรับแต่งผ่านตัวเลือกและคุณสามารถใช้ปลั๊กอินเดียวกันหลาย ๆ ครั้งเพื่อวัตถุประสงค์ที่แตกต่างกันในไฟล์การกำหนดค่า
//webpack.config.js
const htmlwebpackplugin = ต้องการ ('html-webpack-plugin');
โมดูล: {
กฎ: [{ ทดสอบ: /.txt$/ ใช้: 'raw-loader' }],
-
ปลั๊กอิน: [ใหม่ htmlwebpackplugin ({เทมเพลต: './src/index.html'})],
}; ในตัวอย่างข้างต้น html-webpack-plugin สร้างไฟล์ HTML สำหรับแอปพลิเคชันและฉีดชุดที่สร้างขึ้นทั้งหมดโดยอัตโนมัติ
4
. ปลั๊กอินนี้เป็นปลั๊กอินในตัวใน WebPack และไม่จำเป็นต้องติดตั้ง
const webpack = ต้องการ ('webpack');
โมดูล.ส่งออก = {
-
โมดูล: {
กฎ: [
-
ทดสอบ: /(.jsx|.js)$/
ใช้: {
ตัวโหลด: "Babel-Loader"
-
ยกเว้น: /node_modules /
-
-
ทดสอบ: /.css$/
ใช้: [
-
ตัวโหลด: "Style-Loader"
-
ตัวโหลด: "CSS-Loader"
ตัวเลือก: {
โมดูล: จริง
-
-
ตัวโหลด: "postcss-loader"
-
-
-
-
-
ปลั๊กอิน: [
ใหม่ webpack.bannerplugin ('Wenxuehai สงวนลิขสิทธิ์การทำซ้ำใด ๆ จะถูกสอบสวน')
-
} Hot Module Replacement
4.2
การโหลดร้อนนั้นแตกต่างจาก WebPack-Dev-Server หน้า
(
1
)
เพิ่มปลั๊กอิน HMR ไปยังไฟล์การกำหนดค่า Webpack;
. Babel มีปลั๊กอินที่เรียกว่า react-transform-hrm ซึ่งช่วยให้ HMR ทำงานได้อย่างถูกต้องโดยไม่ต้องกำหนดค่าโมดูล
react-transform-hmr
เพิ่มเติม -hmr
const webpack = ต้องการ ('webpack');
โมดูล.ส่งออก = {
รายการ: __dirname + "/app/main.js",/// the ไฟล์รายการเดียวที่ได้รับการกล่าวถึงเอาต์พุตหลายครั้ง: {
เส้นทาง: __dirname + "/สาธารณะ"
ชื่อไฟล์: "Bundle.js"
-
devtool: 'eval-source-map'
devserver: {
contentbase: "./public",///he Directory ที่หน้าโหลดโดยเซิร์ฟเวอร์ท้องถิ่นตั้งอยู่ที่ HistoryApifallback: จริง // อย่ากระโดดแบบอินไลน์: จริง
ร้อน: จริง
-
โมดูล: {
กฎ: [
-
ทดสอบ: /(.jsx|.js)$/
ใช้: {
ตัวโหลด: "Babel-Loader"
-
ยกเว้น: /node_modules /
-
-
ทดสอบ: /.css$/
ใช้: [
-
ตัวโหลด: "Style-Loader"
-
ตัวโหลด: "CSS-Loader"
ตัวเลือก: {
โมดูล: จริง
-
-
ตัวโหลด: "postcss-loader"
-
-
-
-
-
ปลั๊กอิน: [
ใหม่ webpack.bannerplugin ('ลิขสิทธิ์การทำซ้ำใด ๆ จะถูกสอบสวน')
ใหม่ webpack.hotmodulereplacementplugin () // ปลั๊กอินโหลดซ้ำร้อน]
}; กำหนดค่า babel
// .babelrc
-
"presets": ["ตอบสนอง", "env"],
"env": {
"การพัฒนา": {
"ปลั๊กอิน": [["ทำปฏิกิริยาแปลง", {
"แปลง": [{
"transform": "react-transform-hmr",
"นำเข้า": ["React"],
"คนในท้องถิ่น": ["โมดูล"]
-
-
-
-
} // greeter, js
นำเข้าปฏิกิริยา {
ส่วนประกอบ
} จาก 'React'
นำเข้าสไตล์จาก './main.css'
คลาส Greeter ขยายส่วนประกอบ {
render () {
กลับ (
<div>
<h1>
aaaf
</h1>
</div>
-
-
-
ส่งออก greeter เริ่มต้น //main.js
นำเข้าปฏิกิริยาจาก 'React';
นำเข้า {
แสดงผล
} จาก 'React-Dom';
นำเข้า greeter จาก './greeter.js';
Render (
<greeter />, document.getElementById ('root')); รีเฟรชโดยอัตโนมัติ
(บางครั้งไม่มีผลกระทบอาจเป็นปัญหาของเวอร์ชัน
)
4.3
และแพ็คเกจที่สร้างขึ้นเมื่อไฟล์ JS ถูกแสดงผลสไตล์จะถูกแทรกลงในหน้าในรูปแบบของแท็กสไตล์ผ่านไวยากรณ์ JS แต่ในกรณีนี้ไฟล์ Bundle ที่บรรจุอาจมีขนาดใหญ่เกินไป
ปลั๊กอิน ExtractTextWebPackPlugin จะย้าย *.CS ที่อ้างอิงในรายการรายการ (รวมถึงไฟล์ CSS ที่นำเข้าและสไตล์ที่เขียนในไฟล์ VUE) ไปยังไฟล์ CSS อิสระและคั่น ExtractTextPlugin จะสร้างไฟล์ CSS ที่สอดคล้องกันสำหรับแต่ละรายการซึ่งหมายความว่ารายการหนึ่งสอดคล้องกับไฟล์ CSS
ด้วยปลั๊กอิน ExtractTextWebPackPlugin สไตล์ของคุณจะไม่ถูกฝังอยู่ในชุด JS อีกต่อไป แต่จะถูกวางไว้ในไฟล์ CSS แยกต่างหาก (เช่น styles.css ) หากไฟล์สไตล์ของคุณมีขนาดใหญ่ขึ้นสิ่งนี้จะทำให้การโหลดเร็วขึ้นเร็วขึ้นเนื่องจากชุด CSS จะถูกโหลดควบคู่ไปกับชุด JS
const extractTextPlugin = ต้องการ ("extract-text-webpack-plugin");
โมดูล.ส่งออก = {
โมดูล: {
กฎ: [
-
ทดสอบ: /.css$/
ใช้: ExtractTextPlugin.extract ({
ทางเลือก: "Style-Loader",
ใช้: "CSS-Loader"
-
-
-
-
ปลั๊กอิน: [
ใหม่ ExtractTextPlugin ({
ชื่อไฟล์: utils.assetSpath ('css/[ชื่อ]. [contentHash] .css'), // ExtractTextPlugin สร้างไฟล์ที่สอดคล้องกันสำหรับแต่ละรายการ ] หรือ [ContentHash]
// allchunks: จริง, // เมื่อใช้ `commonschunkplugin` และมีการสกัดชิ้น (จาก` extractTextplugin.extract`) ในก้อนทั่วไป `allchunks` ** ต้องตั้งค่าเป็น` true '
-
-
} 4.3.1
ตัวเลือก Allchunks หมายความว่ารูปแบบที่โหลดแบบอะซิงโครนัสจะต้องถูกแยกเข้าด้วยกันหรือไม่ เนื่องจากโดยค่าเริ่มต้นแม้ว่าจะใช้ปลั๊กอิน ExtractTextWebPackPlugin หากไฟล์สไตล์หรือสไตล์ถูกโหลดแบบอะซิงโครนัสสไตล์เหล่านี้จะไม่ถูกแยกออกเป็นไฟล์ CSS อิสระ แต่จะยังคงบรรจุไว้ในไฟล์ JS
ดังนั้น allChunks:true allChunks:false เป็นค่าเริ่มต้น ไฟล์ หากใช้การโหลดแบบอะซิงโค style-loader นัส แต่ Allchunks ถูกตั้งค่าเป็นเท็จเราต้องตั้งค่าทางเลือกของ fallback สกัด
โปรดดูที่:
https://github.com/sevencon/blog-github/blob/master/articles/webpack หมายเหตุการศึกษา (2)-การใช้งานของ ExtractTextWebpackPlugin.md
https://blog.csdn.net/weixin_411344409/article/article รายละเอียด /88416356
โดยเลือกหนึ่งใน development production หรือ none การตั้งค่าพารามิเตอร์ mode คุณสามารถเปิดใช้งานการเพิ่มประสิทธิภาพในตัวของ WebPack ในสภาพแวดล้อมที่สอดคล้องกัน ค่าเริ่มต้นคือ production
โมดูล.ส่งออก = {
โหมด: 'การผลิต',
}; การกำหนดค่าตัวเลือกโหมดโดยตรงในไฟล์การกำหนดค่าจะบอกให้ WebPack ใช้การเพิ่มประสิทธิภาพในตัวของโหมดที่เกี่ยวข้อง
การพัฒนา: โหมดการพัฒนารหัสแพคเกจจะไม่ถูกบีบอัดและเปิดใช้งานการดีบักรหัส
การผลิต: โหมดการผลิตตรงข้าม
ตั้งค่าโหมดการพัฒนาหรือการผลิตและ WebPack จะตั้งค่าของ process.env.node_env โดยอัตโนมัติเราสามารถรับค่านี้ได้โดยตรงในโฟลเดอร์ใด ๆ แต่ถ้าคุณตั้งค่า NODE_ENV เท่านั้น mode จะไม่ถูกตั้งค่าโดยอัตโนมัติ (ในโหนดกระบวนการตัวแปรส่วนกลางแสดงถึงกระบวนการโหนดปัจจุบันแอตทริบิวต์ process.env มีข้อมูลสภาพแวดล้อมผู้ใช้แอตทริบิวต์ node_env ไม่มีอยู่ใน process.env เอง เป็นสภาพแวดล้อมการผลิตหรือสภาพแวดล้อมการพัฒนา)
(โปรดทราบ: ตัวเลือกโหมดใหม่ใน webpack4 ก่อน 4 มันถูกตั้งค่าด้วยปลั๊กอิน definePlugin. WebPack4 ลบ definePlugin)
5.1 มีการอธิบายอย่างละเอียด
ใน WebPack ในโครงการ VUE ที่สร้างขึ้นโดยค่าเริ่มต้นโดยใช้ Vue-CLI การกำหนดค่า NODE_ENV มีดังนี้:
// ภายใต้ไฟล์ webpack.dev.conf.js ไฟล์ dev.env.js เปิดตัวใหม่ webpack.defineplugin ({{{
'process.env': ต้องการ ('../ config/dev.env')
}), //module.exports = Merge (prodenv, {ในไฟล์ dev.env.js
node_env: '"การพัฒนา"'
}) // ภายใต้ไฟล์ webpack.prod.conf.js ไฟล์ prod.env.js จะแนะนำ const env = require ('../ config/prod.env')
ใหม่ webpack.defineplugin ({
'process.env': env
}), //module.exports = {ในไฟล์ prod.env.js
node_env: '"การผลิต"'
} อย่างที่คุณเห็นจากข้างต้นในสภาพแวดล้อมการพัฒนาไฟล์การกำหนดค่ากำหนดค่า node_env เป็น 'การพัฒนา';
เมื่อเราเรียกใช้โครงการเราจะเรียกใช้งาน NPM Run DEV หรือ NPM Run Build ค่า node_env ที่สอดคล้องกันสามารถรับได้ในไฟล์ใด ๆ ของโครงการ (ไม่จำเป็นต้องเป็นไฟล์การกำหนดค่าเนื่องจากขึ้นอยู่กับว่าไฟล์การกำหนดค่าที่กำหนดค่าด้วยค่า node_env มีผลกระทบ)
5.2. Process.env.node_env
กระบวนการกำหนดค่าเป็นตัวแปรส่วนกลางของโหนดและกระบวนการมีแอตทริบิวต์ ENV แต่ไม่มีแอตทริบิวต์ Node_env ตัวแปร NODE_ENV ไม่สามารถใช้งานได้โดยตรงใน process.env แต่ได้มาจากการตั้งค่า ฟังก์ชั่นของตัวแปรนี้คือ: เราสามารถแยกแยะสภาพแวดล้อมการพัฒนาหรือสภาพแวดล้อมการผลิตโดยการตัดสินตัวแปรนี้
(1) ค่าตัวแปรส่วนกลางสามารถตั้งค่าผ่านปลั๊กอินในตัวของ WebPack DEFINEPLUGIN:
ใหม่ webPack.definePlugin ({
'process.env.node_env': json.stringify ('การผลิต')
}) หลังจากการตั้งค่าคุณจะได้รับค่านี้ในสคริปต์การดำเนินการเช่น:
// main.js
console.log
(process.env.node_env);
(2) ดาวน์โหลดแพ็คเกจ Cross-ENV ครั้งแรกผ่าน
การตั้งค่าแพ็คเกจ Cross-ENV:
CNPM I Cross-ENV -D
ตั้งค่าไฟล์ package.json:
"build": "cross-env node_env = ทดสอบ webpack-config webpack.config .js "
ในเวลานี้ค่า (process.env.node_env) สามารถรับได้ในไฟล์การกำหนดค่า แต่ไม่สามารถรับได้ในสคริปต์ที่เรียกใช้งานได้จำเป็นต้องใช้กับปลั๊กอิน definePlugin