웹팩 패키지 컴파일 학습 기록

먼저 웹 패키지의 설치, 전역 설치 또는 로컬 설치, 프로젝트의 로컬 설치를 권장합니다.

npm install webpack -g //    
npm install webpack --save-dev //

프로파일

루트 디렉터리 생성 파일webpack.config.js

입구, 출구, 플러그인 등 설정 항목, 패키지 설정.json 파일scripts 프로젝트, 간단한 설정

module.exports = { 
 entry: "./src/script/index.js", 
 output: { 
 path: __dirname + "/build/script", 
 filename: "[name].js" 
 } 
 }

{ 
 "scripts": { 
 "webpack": "webpack" 
 }, 
 "devDependencies": { 
 "webpack": "^3.10.0" 
 } 
 }

위에서 설정한 대로 명령줄nm run webpack을 입력하여 첫 번째 포장을 완성한다.build의script 디렉터리에서 main.js 파일 생성하기;

less 컴파일 패키지

less 컴파일 패키지는 강력한 loaders를 사용해야 합니다.es6, json 등을 컴파일하려면 설치에 필요한loader

가 필요합니다.

설치npm install --save-dev style-loader less-loader css-loader less//주: 네 개를 설치해야 하며 필수입니다.

module.exports = { 
 entry: "./src/script/index.js", 
 output: { 
 path: __dirname + "/build/script", 
 filename: "[name].js" 
 }, 
 module: { 
 rules: [{ 
 test: /\.less$/, 
 use: extractLess.extract({ 
 use: [{ 
 loader: "style-loader" 
 }{ 
 loader: "css-loader" 
 }, { 
 loader: "less-loader" 
 }] 
 }) 
 }] 
 },

입구 파일index.js에 import가 컴파일해야 하는less 파일을 넣는다//입구 파일을 패키지 처리하기 때문에 반드시 import가 입구 파일에 들어가야 한다.

그리고 운행npm run webpack;포장을 완료하고 index를 도입했습니다.js 파일의 html 페이지는 정상적으로 스타일을 표시할 수 있습니다. 이 때의 스타일은 컴파일한 후에 스타일 탭을 생성했고 스타일은 내연적

이렇게 문제가 존재한다. 온라인의 css는 캐시할 수 없고 컴파일된 index.js 파일도 이상하게 커진다. 전방 성능 최적화에 불리하고 몇 번째 성숙한 방법이기 때문에 jindex에 직접 포장한다.js;오프라인 개발에만 적합;따라서 분리 컴파일 패키지가 필요합니다.

extract-text-webpack-plugin 플러그인을 사용하여 로컬 설치

cnpm install --save-dev extract-text-ebpack-plugin

홈페이지 작성법 참조, 플러그인 및 구성 내용 추가https://webpack.js.org/loaders/less-loader/#src/components/Sidebar/Sidebar.jsx

웹팩에 있습니다.config.js에서 도입

const ExtractTextPlugin = require("extract-text-webpack-plugin"); //  css 
 const extractLess = new ExtractTextPlugin({ 
 filename: "../style/[name].css", 
 disable: process.env.NODE_ENV === "development" 
 });

;filename의 경로를 주의하여 자신의 디렉터리 css 파일이 있는 파일 디렉터리에 설정합니다.

less-loader의 설정을 수정:

{ 
 test: /\.less$/, 
 use: extractLess.extract({ 
 use: [{ 
 loader: "css-loader" 
 }, { 
 loader: "less-loader" 
 }], 
 // use style-loader in development 
 fallback: "style-loader" 
 }) 
 }

;

플러그인 추가

plugins: [ extractLess ]

npm run webpack ;build 디렉터리에 css 파일을 생성합니다.less 파일을 분리하고 컴파일할 수 있습니다.
오늘은 여기까지 노력할수록 행운이다

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

웹팩 패키지 컴파일 학습 기록

좋은 웹페이지 즐겨찾기