1.
항목은 webpack이 어떤 파일을 시작점으로 사용하여 패키징을 시작하고 내부 종속성 그래프를 분석하고 구축하도록 지시합니다.
2.
출력은 웹팩에 패키지된 리소스 번들을 출력할 위치와 이름 지정 방법을 지시합니다.
3. 로더
웹팩은 기본적으로 사용할 수 있는 웹팩의 내장 기능인 JavaScript 및 JSON 파일만 이해할 수 있습니다. 로더를 사용하면 webpack이 다른 유형의 파일을 처리하고 이를 애플리케이션에서 사용할 수 있고 종속성 그래프에 추가할 수 있는 유효한 모듈로 변환할 수 있습니다.
4.
플러그인플러그인은 더 넓은 범위의 작업을 수행하는 데 사용할 수 있습니다. 플러그인은 패키징 최적화 및 압축부터 환경 변수 재정의에 이르기까지 다양합니다.
5. 모드
모드(Mode)는 웹팩에 해당 모드의 구성을 사용하도록 지시합니다.
웹팩의 5가지 핵심 개념에 대해 자세히 소개하겠습니다.
개체는 webpack에서 번들을 찾고, 시작하고, 빌드하는 데 사용됩니다. 항목은 애플리케이션의 시작점입니다. 이 시작점에서 애플리케이션이 실행을 시작합니다. 배열을 전달하면 배열의 각 항목이 실행됩니다. 진입점은 내부 종속성 그래프 작성을 시작하기 위해 웹팩이 사용해야 하는 모듈을 나타냅니다. 진입점을 입력한 후 webpack은 진입점이 어떤 모듈과 라이브러리에 의존하는지(직간접적으로) 알아냅니다.
간단한 규칙: 모든 HTML 페이지에는 시작점이 있습니다. 단일 페이지 애플리케이션(SPA): 하나의 진입점, 다중 페이지 애플리케이션(MPA): 여러 진입점.
기본값은 ./src/index.js 이지만 webpack 구성에서 entry 속성을 구성하여 다른 진입점을 지정할 수 있습니다. 예:
//단일 항목--문자열 module.exports = {
항목: './path/to/my/entry/file.js',
};
//여러 항목--배열 module.exports = {
항목: ['./src/index.js', './src/add.js']
};
//여러 항목--object module.exports = {
항목: {
홈: './home.js',
정보: './about.js',
연락처: './contact.js'
}
}; 항목 값 유형:
문자열: 단일 항목, 청크를 형성하도록 패키지되고 결국 하나의 번들 파일만 출력됩니다. 청크의 기본 이름은 기본
배열입니다. 다중 항목, 모든 항목 파일만 출력됩니다. 결국 하나의 청크를 형성하고 번들 파일을 출력하며 청크 이름은 기본으로 main입니다. 일반적으로 HTML 핫 업데이트 유효 개체를 만들기 위해 HMR 기능에서만 사용됩니다
. 여러 항목, 키 수만큼의 청크 및 많은 번들 파일이 출력되며 각 키(키)는 청크의 이름이 됩니다. 객체 유형에서 각 키의 값은 문자열이 아닌 배열일 수도 있습니다.
output 웹팩에 번들, 자산 및 패키지한 기타 패키지 또는 웹팩을 사용하여 로드한 모든 항목을 출력하는 방법과 출력 위치를 지시합니다. . 출력 번들의 기본값은 ./dist/main.js 이며, 생성된 기타 파일은 기본적으로 ./dist 폴더에 배치됩니다.
구성에서 output 필드를 지정하여 이러한 프로세스를 구성할 수 있습니다:
//webpack.config.js
const path = require('경로');
모듈.수출 = {
항목: './path/to/my/entry/file.js',
출력: {
경로: path.resolve(__dirname, 'dist'),
파일 이름: 'my-first-webpack.bundle.js',
},
}; 우리는 webpack에 번들의 이름과 번들이 생성된 위치를 output.filename 및 output.path 속성을 통해 알 수 있습니다.
2.1.output.filename(파일 이름 및 디렉터리)
이 옵션은 각 출력 번들의 디렉터리와 이름을 결정합니다. 이러한 번들은 output.path 옵션으로 지정된 디렉터리에 기록됩니다.
단일入口점의 경우 filename은 정적 이름이 됩니다. 그러나 여러 진입점, 코드 분할 또는 다양한 플러그인을 통해 여러 번들을 생성하는 경우 다른 방법을 사용하여 각 번들에 고유한 이름을 지정해야 합니다.
//단일 항목:
모듈.수출 = {
//...
출력: {
파일 이름: 'js/bundle.js'
}
};
//여러 항목--항목 이름을 사용합니다.
모듈.수출 = {
//...
출력: {
파일 이름: '[이름].bundle.js'
}
};
//여러 항목 - 고유한 해시를 사용하여 각 빌드 프로세스에서 module.exports = {를 생성합니다.
//...
출력: {
파일 이름: '[이름].[해시].bundle.js'
}
};
... 2.2.output.path(파일 디렉터리)
output.path는 모든 향후 리소스 출력에 대한 공통 디렉터리인 모든 출력 파일의 디렉터리를 지정합니다. 경로는 절대 경로여야 합니다.
모듈.수출 = {
//...
출력: {
경로: path.resolve(__dirname, 'dist/assets')
}
}; 2.3.output.publicPath(참조된 리소스의 경로 접두사)
publicPath는 html 파일의 모든 리소스에 의해 도입된 공개 경로 접두사를 지정합니다. 생성된 파일의 경로에는 영향을 미치지 않습니다. 대신 html 파일에 다양한 리소스가 도입되면 가져온 리소스의 경로에 publicPath가 접두사로 추가됩니다.
예:
vue-cli로 생성된 webpack 구성에서 프로덕션 환경의 publicPath 값은 기본적으로 현재 디렉터리의 루트 디렉터리인 '/'로 설정됩니다.
패키징 후 html 파일을 열면 html 파일에 소개된 리소스 경로가 다음과 같은 것을 확인할 수 있습니다.
보시다시피 / 기호가 경로 앞에 추가됩니다. 생성된 html 파일에 액세스하기 위해 브라우저를 열면 리소스에 액세스할 수 없으며 404 보고서가 보고됩니다.
서버에서는 아래와 같으나 접속에 문제가 있을 수 있습니다.
publicPath를 상대 경로로 변경하거나 직접 주석 처리할 수 있습니다.
2.3.1.path와 publicPath의 차이점
打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。2.4.output.chunkFilename(비항목 청크 이름)
output.chunkFilename은 비항목 청크 파일의 이름을 결정합니다. 즉, 엔트리 파일에서 생성된 청크 외에 다른 파일에서 생성된 청크 파일에도 이름이 지정됩니다.
모듈.수출 = {
//...
출력: {
ChunkFilename: 'js/[name]_chunk.js' //비항목 청크의 이름}
}; webpack 자체는 JavaScript 및 JSON 파일만 패키징할 수 있습니다( webpack3+和webpack2+ 에는 JSON 파일 처리 기능이 내장되어 있지만 webpack1+并不支持， json-loader 도입해야 합니다). 웹팩은 즉시 사용할 수 있습니다. Webpack 자체는 CSS, Vue 등과 같은 다른 유형의 파일 패키징을 지원하지 않지만 다양한 로더를 사용하여 webpack이 이러한 유형의 파일을 처리하도록 할 수 있습니다. 로더는 다른 언어(예: TypeScript)의 파일을 JavaScript로 변환하거나 인라인 이미지를 데이터 URL로 변환할 수 있습니다. 로더를 사용하면 JavaScript 모듈에서 CSS 파일을 직접 import 수도 있습니다.
다양한 loader 사용함으로써 webpack scss를 분석하여 CSS로 변환하거나 차세대 JS 파일(ES6, ES7)을 최신 브라우저와 호환되는 JS 파일로 변환하는 등 다양한 형식의 파일을 처리하기 위해 외부 스크립트 또는 도구를 호출하는 기능을 갖습니다. React 개발을 위해 적절한 로더는 React에서 사용되는 JSX 파일을 JS 파일로 변환할 수 있습니다.
웹팩 구성에서 로더에는
변환할 파일을 식별하는 test 속성이라는 두 가지 속성이 있습니다.
use 속성은 변환을 수행할 때 사용해야 하는 로더를 정의합니다.
include/exclude（可选）： 처리해야 하는 파일(폴더)을 수동으로 추가하거나 처리할 필요가 없는 파일(폴더)을 차단합니다.
query（可选） : 로더에 대한 추가 설정 옵션 제공
// 예: webpack.config.js
const path = require('경로');
모듈.수출 = {
출력: {
파일 이름: 'my-first-webpack.bundle.js',
},
모듈: {
규칙: [
{ 테스트: /.txt$/, 로더: 'raw-loader' },
{ test: /.css$/, use: ['style-loader', 'css-loader'] } //여러 로더를 사용하는 경우 use를 사용해야 합니다.
],
},
}; 위 구성에서는 두 개의 필수 속성( test 및 use 이 포함된 별도의 모듈 객체에 대해 rules 속성이 정의됩니다. 이는 웹팩 컴파일러에게 require() / import 문에서 '.txt'로 구문 분석된 경로를 발견하면 패키징하기 전에 raw-loader 사용하여 변환하도록 지시하는 것과 같습니다.
여러 로더를 사용하는 경우 use를 사용해야 합니다. use 배열의 로더는 오른쪽에서 왼쪽으로 순서대로 실행됩니다. 예를 들어, 위의 CSS 파일에서 먼저 css-loader는 CSS 파일을 JS로 컴파일하고 이를 JS 파일에 로드합니다. 그런 다음 style-loader는 스타일 태그를 생성하고 JS의 스타일 리소스를 head 태그에 삽입합니다.
3.1 CSS-loader
Webpack은 스타일 시트 처리를 위한 두 가지 도구인 css-loader 와 style-loader 제공합니다. css-loader 사용하면 import 와 유사한 방법을 사용하여 CSS 파일을 도입할 수 있습니다. style-loader 계산된 모든 스타일을 페이지에 추가합니다. 이 두 가지를 결합하면 webpack으로 패키지된 JS 파일에 스타일 시트를 삽입할 수 있습니다. 파일을 JS 파일에 도입할 수 있습니다.
//npm 설치 --save-dev style-loader css-loader //css-loader 버전이 너무 높으면 컴파일이 잘못될 수 있으므로 [email protected]과 같이 버전을 낮추는 것이 좋습니다.
//module.exports 사용 = {
...
모듈: {
규칙: [
{
테스트: /(.jsx|.js)$/,
사용: {
로더: "바벨 로더"
},
제외: /node_modules/
},
{
test: /.css$/, //동일한 파일에 여러 로더를 도입하는 방법. 로더의 작업 순서는 이후 로더가 먼저 사용하기 시작하는 것입니다.
{
로더: "스타일 로더"
}, {
로더: "css-로더"
}
]
}
]
}
}; main.css 파일이 있다고 가정합니다
. 배경: 녹색; }
webpack이 "main.css" 파일을 찾기 위해 다음과 같이 "main.js"로 가져옵니다.
//main.js
'반응'에서 반응을 가져옵니다;
'react-dom'에서 {render}를 가져옵니다.
'./Greeter'에서 Greeter를 가져옵니다.
import './main.css';//css 파일을 가져오려면 require를 사용하십시오. render(<Greeter />, document.getElementById('root')) 일반적으로 CSS는 js가 아닌 동일한 파일로 패키지됩니다. 별도의 CSS 파일로 패키징됩니다. 그러나 적절한 구성을 사용하면 webpack은 CSS를 별도의 파일로 패키징할 수도 있습니다.
로더는 특정 유형의 모듈을 변환하는 데 사용되는 반면, 플러그인은 패키징 최적화, 압축, 리소스 관리, 환경 변수 주입 등을 포함한 광범위한 작업을 수행하는 데 사용할 수 있습니다. 플러그인의 목적은 로더가 달성할 수 없는 다른 문제를 해결하는 것입니다.
플러그인을 사용하려면 npm 통해 플러그인을 설치한 다음 플러그인 속성 아래에 플러그인 인스턴스를 추가해야 합니다. 플러그인은 매개변수/옵션을 전달할 수 있으므로 웹팩 구성의 plugins 속성에 new 인스턴스를 전달해야 합니다. 대부분의 플러그인은 옵션을 통해 사용자 정의할 수 있으며, 구성 파일에서 동일한 플러그인을 다양한 목적으로 여러 번 사용할 수 있습니다.
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm을 통해 설치 const webpack = require('webpack') // 내장 플러그인에 액세스하는 데 사용됨 module.exports = {
모듈: {
규칙: [{ 테스트: /.txt$/, 사용: 'raw-loader' }],
},
플러그인: [new HtmlWebpackPlugin({ template: './src/index.html' })],
}; 위의 예에서 html-webpack-plugin 애플리케이션에 대한 HTML 파일을 생성하고 생성된 모든 번들을 자동으로 삽입합니다.
4.1.BannerPlugin 플러그인(저작권 표시 추가)
아래에서는 패키지 코드에 저작권 표시를 추가하는 플러그인을 추가했습니다. 이 플러그인은 webpack에 내장된 플러그인이므로 설치가 필요하지 않습니다.
const webpack = require('webpack');
모듈.수출 = {
...
모듈: {
규칙: [
{
테스트: /(.jsx|.js)$/,
사용: {
로더: "바벨 로더"
},
제외: /node_modules/
},
{
테스트: /.css$/,
사용: [
{
로더: "스타일 로더"
}, {
로더: "css-로더",
옵션: {
모듈: 사실
}
}, {
로더: "postcss-로더"
}
]
}
]
},
플러그인: [
new webpack.BannerPlugin('Wenxuehai 모든 권리 보유, 모든 복제는 조사됩니다')
],
}; 4.2.핫 모듈 교체 플러그인(핫 로딩)
Hot Module Replacement (HMR)는 웹팩에서 매우 유용한 플러그인으로, 컴포넌트 코드를 수정한 후 수정된 효과를 실시간으로 자동으로 새로 고치고 미리 볼 수 있습니다. 핫 로딩은 webpack-dev-server와 다릅니다. 애플리케이션이 실행 중일 때 핫 교체는 브라우저에서 직접 DOM 스타일을 수정하는 것처럼 페이지를 새로 고치지 않고도 코드 업데이트의 효과를 볼 수 있지만 webpack-dev-server에는 새로 고침이 필요합니다. 페이지.
(1) Webpack 구성 파일에 HMR 플러그인을 추가합니다.
(2) Webpack Dev Server에 "hot" 매개변수를 추가합니다.
4.2.1
React 모듈은 Babel을 사용하여 기능의 핫 로딩을 구현할 수 있습니다. .
Babel에는 React 모듈을 추가로 구성하지 않고도 HMR이 제대로 작동할 수 있도록 해주는 Reactreact-transform-hmr
react-transform-hrm 이라는 플러그인이 있습니다
. -hmr
const webpack = require('webpack');
모듈.수출 = {
항목: __dirname + "/app/main.js",//여러 번 언급된 유일한 항목 파일 출력: {
경로: __dirname + "/public",
파일 이름: "bundle.js"
},
devtool: '평가 소스 맵',
개발자서버: {
contentBase: "./public",//로컬 서버에서 로드한 페이지가 있는 디렉터리입니다.historyApiFallback: true,//인라인으로 점프하지 마세요: true,
뜨겁다 : 사실
},
모듈: {
규칙: [
{
테스트: /(.jsx|.js)$/,
사용: {
로더: "바벨 로더"
},
제외: /node_modules/
},
{
테스트: /.css$/,
사용: [
{
로더: "스타일 로더"
}, {
로더: "css-로더",
옵션: {
모듈: 사실
}
}, {
로더: "postcss-로더"
}
]
}
]
},
플러그인: [
new webpack.BannerPlugin('저작권, 모든 복제는 조사됩니다'),
new webpack.HotModuleReplacementPlugin() //핫 리로드 플러그인],
}; 바벨 구성
// .babelrc
{
"presets": ["반응", "환경"],
"환경": {
"개발": {
"플러그인": [["반응 변환", {
"변환": [{
"변환": "반응-변형-hmr",
"imports": ["반응"],
"locals": ["모듈"]
}]
}]]
}
}
} //인사말,js
수입 반응, {
요소
} '반응'에서
'./main.css'에서 스타일 가져오기
Greeter 클래스는 Component {를 확장합니다.
렌더링() {
반품 (
<div>
<h1>
아아아아
</h1>
</div>
);
}
}
기본 Greeter 내보내기 //main.js
'반응'에서 반응을 가져옵니다;
수입 {
세우다
} '반응 돔'에서;
'./greeter.js'에서 Greeter를 가져옵니다.
render( < Greeter / > , document.getElementById('root')); 이제 핫 로딩 모듈을 구현할 수 있으면 저장할 때마다 브라우저에서 업데이트된 콘텐츠를 직접 볼 수 있으며 브라우저를 새로 고칠 필요가 없습니다. 자동으로 새로 고칩니다.
(영향이 없을 때도 있고 버전 문제일 수도 있습니다.)
4.3.ExtractTextWebpackPlugin 플러그인(CSS 추출)
기본적으로 웹팩은 CSS 스타일을 독립 파일로 처리하지 않지만 CSS를 js 파일로 패키징합니다. 그리고 생성된 것을 패키징합니다. js 파일이 렌더링되면 스타일은 js 구문을 통해 스타일 태그 형태로 페이지에 삽입됩니다. 하지만 이 경우 패키지된 번들 파일이 너무 클 수 있습니다. 이때 ExtractTextWebpackPlugin 플러그인을 사용하여 CSS 스타일을 CSS 파일로 분리할 수 있습니다.
ExtractTextWebpackPlugin 플러그인은 항목 청크(가져온 CSS 파일 및 vue 파일에 작성된 스타일 포함)에서 참조된 *.css를 독립적이고 분리된 CSS 파일로 이동합니다. ExtractTextPlugin 각 항목 청크에 대해 해당 CSS 파일을 생성합니다. 즉, 하나의 항목이 여러 항목이 있는 경우 해당 CSS 파일이 각각 생성됩니다.
ExtractTextWebpackPlugin 플러그인을 사용하면 스타일이 더 이상 JS 번들에 포함되지 않고 별도의 CSS 파일(예: styles.css )에 배치됩니다. 스타일 파일의 크기가 더 큰 경우 CSS 번들이 JS 번들과 병렬로 로드되므로 초기 로드가 더 빨라집니다.
const ExtractTextPlugin = require("추출-텍스트-웹팩-플러그인");
모듈.수출 = {
모듈: {
규칙: [
{
테스트: /.css$/,
사용: ExtractTextPlugin.extract({
대체: "스타일 로더",
사용: "css-로더"
})
}
]
},
플러그인: [
새로운 ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'), //ExtractTextPlugin은 각 항목 청크에 대해 해당 파일을 생성하므로 여러 항목 청크를 구성하는 경우 [ name], [id]를 사용해야 합니다. ] 또는 [콘텐츠해시]
// allChunks: true, // `CommonsChunkPlugin`을 사용하고 공통 청크에 추출된 청크(`ExtractTextPlugin.extract`에서)가 있는 경우 `allChunks` **를 `true`로 설정해야 합니다.
}),
]
} 4.3.1.allChunks 옵션(비동기적으로 로드된 스타일도 함께 추출할지 여부)
ExtractTextWebpackPlugin 플러그인의 allChunks 옵션의 기본값은 false입니다.
allChunks 옵션은 비동기적으로 로드된 스타일을 함께 추출해야 하는지 여부를 의미합니다. 기본적으로 ExtractTextWebpackPlugin 플러그인을 사용하더라도 스타일이나 스타일 파일이 비동기적으로 로드되면 이러한 스타일은 독립적인 CSS 파일로 추출되지 않고 여전히 js 파일로 패키지되기 때문입니다.
따라서 allChunks:false 가 기본값입니다. 기본값은 항목에서 코드를 추출하는 것이지만 비동기적으로 로드된 코드는 추출되지 않습니다. allChunks:true 모든 모듈(비동기적으로 로드된 모듈 포함)의 코드를 추출하는 것입니다. 파일. 스타일의 비동기 로딩이 사용되지만 allChunks가 false로 설정된 경우 ExtractTextPlugin.extract의 대체를 설정해야 합니다. fallback 비동기 코드에 의해 로드된 CSS 코드가 그렇지 않을 때 style-loader 사용하여 비동기적으로 로드하는 것입니다. 추출된 구성 요소의 스타일입니다.
참고하세요:
https://github.com/sevenCon/blog-github/blob/master/articles/webpack 연구 노트 (2) - ExtractTextWebpackPlugin.md 사용법
https://blog.csdn.net/weixin_41134409/article/ 세부정보 /88416356
development , production 또는 none 중 하나를 선택하여 mode 매개변수를 설정하면 해당 환경에서 웹팩 내장 최적화를 활성화할 수 있습니다. 기본값은 production 입니다.
모듈.수출 = {
모드: '프로덕션',
}; 구성 파일에서 모드 옵션을 직접 구성하면 webpack이 해당 모드의 내장 최적화를 사용하게 됩니다. 모드 옵션에는 개발, 프로덕션 및 없음이 포함됩니다.
development: 개발 모드에서는 패키지된 코드가 압축되지 않으며 코드 디버깅이 활성화됩니다.
생산: 생산 모드, 정반대입니다.
모드를 개발 또는 프로덕션으로 설정하면 webpack이 자동으로 process.env.NODE_ENV 값을 설정합니다. 이 값은 모든 폴더에서 직접 가져올 수 있습니다. 하지만 NODE_ENV 만 설정하면 mode 자동으로 설정되지 않습니다. (노드에서 전역 변수 process는 현재 노드 프로세스를 나타냅니다. process.env 속성에는 사용자 환경 정보가 포함됩니다. NODE_ENV 속성은 process.env 자체에는 존재하지 않습니다. 일반적으로 우리는 NODE_ENV 속성을 직접 정의하고 이를 사용하여 여부를 결정합니다.
(참고: 모드 옵션은 webpack4에 새로 추가되었습니다. 4 이전에는 DefinePlugin 플러그인으로 설정되었습니다. Webpack4에서는 DefinePlugin을 삭제했습니다.)
5.1
vue-cli 프로젝트의 모드 구성.
webpack에자세히 설명되어 있습니다
. 일반적으로 NODE_ENV 값은 구성 파일에서 구성됩니다. vue-cli를 사용하여 기본적으로 생성된 vue 프로젝트에서 NODE_ENV 구성은 다음과 같습니다.
//webpack.dev.conf.js 파일 아래에 dev.env.js 파일이 도입되었습니다. new webpack.DefinePlugin({
'process.env': require('../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': 환경
}), //module.exports = { prod.env.js 파일에 있음
NODE_ENV: '"생산"'
} 위에서 볼 수 있듯이 개발 환경에서는 구성 파일이 NODE_ENV를 'development'로 구성하고, 구성 파일은 NODE_ENV를 'production'으로 구성합니다.
프로젝트를 실행할 때 npm run dev 또는 npm run build를 실행합니다. 이 두 명령은 개발 환경 또는 프로덕션 환경의 구성 파일을 사용하여 실행 중인 프로젝트를 생성하고 이에 따라 해당 NODE_ENV 값을 구성합니다. 해당 NODE_ENV 값은 프로젝트의 모든 파일에서 얻을 수 있습니다(NODE_ENV 값으로 구성된 구성 파일이 적용되었는지 여부에 따라 다르므로 반드시 구성 파일일 필요는 없음).
5.2. Process.env.NODE_ENV 구성
프로세스는 노드의 전역 변수이며 프로세스에는 env 속성이 있지만 NODE_ENV 속성은 없습니다. NODE_ENV 변수는 process.env에서 직접 사용할 수 없으며 설정하여 얻습니다. 그러나 일반적으로 NODE_ENV 변수는 환경 유형을 정의하는 데 사용됩니다. 이 변수의 기능은 이 변수를 판단하여 개발 환경과 프로덕션 환경을 구분할 수 있다는 것입니다.
(1) 전역 변수 값은 webpack에 내장된 플러그인 DefinePlugin을 통해 설정할 수 있습니다:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('생산')
}) 설정 후 실행 스크립트에서 이 값을 얻을 수 있습니다. 예:
// main.js console.log(process.env.NODE_ENV); //프로덕션
이지만 이 값은 webpack 구성 파일 webpack.config.js에서 얻을 수 없습니다.
(2) 먼저 크로스 환경
패키지 설정을 통해 크로스 환경 패키지를 다운로드합니다:
cnpm i cross-env -D
package.json 파일 설정:
"build": "cross-env NODE_ENV=test webpack --config webpack.config .js"
이때 값(process.env.NODE_ENV)은 구성 파일에서 얻을 수 있지만 실행 가능한 스크립트에서는 얻을 수 없습니다. DefinePlugin 플러그인과 함께 사용해야 합니다.