일일 학습 웹팩 ①

오늘은 웹팩에 대해 글을 쓰려고했는데 글을 쓸 때 참여할지 모르겠습니다. 오류가 있으면 수정 해주세요. 친구를 읽어 주셔서 감사합니다.
1. 웹팩 인식
1.1 정의 : Node.js를 기반으로 개발 된 프런트 엔드 자동화 된 구성 도구.
1.2 문제 대상 지정 : 정적 리소스의 도입, 병합, 패키징, 압축 및 혼동 문제를 해결합니다.
1.3 자동 건설 도구를 사용하지 않는 경우 문제는 무엇입니까?
① 웹 페이지가 느리게로드됩니다.
② 패키지 간의 많은 종속성을 처리합니다.
2. Webpack 설치
2.1 설치 방법 :
① 전역 설치 : npm install webpack -g
② 프로젝트 종속성 설치 : 프로젝트 루트 디렉토리에서 npm install webpack --save-dev 실행
참고 : webpack4를 사용하려면 webpack-cli가 동시에 설치되어야합니다.
2.2 프로젝트 디렉토리 생성 : webpack 설치시 node-modules 폴더가 생성되므로 수동으로 추가 할 필요가 없습니다. 수동으로 추가해야하는 항목은 빨간색 선으로 표시되었습니다.
여기에 사진 설명 삽입

설치가 완료되면 npx 웹팩을 사용하여 패키징하십시오. 그러면 프로젝트 디렉토리 dist 파일에 main.js 압축 파일이 생성됩니다.
여기에 사진 설명 삽입
2.3 코드 예 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>webpack学习</title>  
     <!-- 引入刚才打包生成的main.js文件 -->
    <script src="../dist/main.js"></script>
  </head>
  <body>
  </body>
</html>

console.log('这次能行')

인쇄 결과 :
여기에 사진 설명 삽입 3. 수동으로 webpack 구성
3.1 새 구성 파일 생성 : /src/webpack.config.js (참고 : 이전에 수동으로 생성 한 dist 폴더를 삭제하십시오.)
3.2 구성 내용 :

let path = require('path ')
module.exports = {
  mode: 'development', // production or development
  entry: './src/index.js', // 入口文件
  output: {
    filename:'main.js', // 打包之后的文件名称
    path: path.join(__dirname, 'dist') 
    }
}

3.3 디렉토리 구조 :
여기에 사진 설명 삽입
3.4 코드 예 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>webpack学习</title>  
    <!-- 引入刚才打包生成的main.js文件 -->
    <script src="../dist/main.js"> </script>
  </head>
  <body>
  </body>
</html>

console.log('这次也可以打出来')

3.5 결과 인쇄

여기에 사진 설명 삽입
4. 웹팩 내장 서비스를 수동으로 설정하세요
페이지가 시작되면 loaclhost를 통해 시작할 수 없습니다. webpack은 express를 통한 개발 서비스가 내장되어 있습니다. 이를 설치하고 관련 콘텐츠를 구성 할 수 있으며 localhost를 통해 페이지에 액세스 할 수 있습니다. 그것의 장점은 실제로 패킹하지 않고 메모리에 팩을 생성한다는 것입니다.
4.1 설치 : npm install webpack-dev-server -D (참고 : 대문자 D는 개발 중 종속성을 나타냄)
4.2 package.json 구성 :
여기에 사진 설명 삽입
4.3 webpack.config.js 구성 :

run : npm run dev

5. 수동 구성 html 템플릿 :
5.1 설치 : npm install html-webpack-plugin -D

5.2 webpack.config.js 구성 :

6. css 수동 구성
6.1 로더 설치
npm install css-loader style-loader less-loader
6.2 webpack.config.js 구성 :

module: {
    rules: [ // 规则 
      // loader执行顺序：默认从右向左，从下向上
      {
        test: /\.less$/,
        use:[
          {
            loader: 'style-loader',
            options:{
              insertAt: 'bottom'
            }
          },
          'css-loader',
          'less-loader'
        ]},
    ]
  }

새 index.css 파일

body  {
  background-color: pink;
}

index.js는 CSS를 소개합니다

require('./index.css')

6.3 npm run dev 실행

이 시점에서 나는 혼란스러워서 다음 내용을 반복했지만 명확하게 읽을 수 있는지 모르겠습니다. 잘못된 점이 있으면 정정하고 함께 진행해주세요.

일일 학습 웹팩 ①

추천