학습 기록 -Webpack 구성

1. webpack개요

webpack현재 개발에서 직면 한 딜레마를 해결할 수 있는 인기있는 프런트 엔드 프로젝트 구축 도구 (패키징 도구)입니다 web. 코드 압축 및 혼동 , 호환성 문제 처리 , 성능 최적화 등과 같은 강력한 기능 뿐만 아니라 친숙한 모듈 식 지원을webpack 제공 하여 프로그래머가 특정 기능 구현에 집중하여 개발 효율성 및 프로젝트 유지 관리 성을 향상 시킬 수 있습니다.js

2. webpack기본 사용

2.1 인터레이스 색상 변경 사례 목록 만들기

1. 새 프로젝트 빈 디렉터리를 만들고 npm init –y명령을 실행 하여 패키지 관리 구성 파일을 초기화합니다.package.json
2. 새 src소스 코드 디렉토리
3. 새 src -> index.html홈페이지
4. 홈페이지의 기본 구조 초기화
5. npm install jquery –S명령을 실행하고 설치하십시오.jQuery
6. 모듈 형식을 통해 목록의 인터레이스 색상 효과를 실현

2.2 프로젝트에서 설치 및 구성webpack

1. npm install webpack webpack-cli –D명령을 실행하여 webpack관련 패키지 를 설치 하십시오.
2. 프로젝트 루트 디렉터리에서 다음과 webpack.config.js같은 webpack구성 파일을 만듭니다 .
3. 에서 webpack구성 파일, 다음과 같은 기본 설정을 초기화합니다 :

module.exports = {
    
    
    mode: 'development' // mode 用来指定构建模式
}

4. package.json구성 파일의 scripts노드 아래 에서 새 dev스크립트는 다음과 같습니다.

"scripts": {
    
    
    "dev": "webpack" // script 节点下的脚本，可以通过 npm run 执行
}

5. 터미널에서 npm run dev명령 을 실행하여 webpack프로젝트 패키징 을 시작하십시오.

2.3 패키지의 시작 및 종료 구성

webpack4.x 버전의 기본 규칙 :

• 패키지 항목 파일 은 다음과 같습니다.src -> index.js
• 패키지 된 출력 파일 은 다음과 같습니다.dist -> main.js

패키지의 시작 및 종료를 수정하려는 경우 webpack.config.js다음 구성 정보를 추가 할 수 있습니다.

const path = require('path'); // 导入 node.js 中专门操作路径的模块
module.exports = {
    
    
    entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    output: {
    
    
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称
    }
}

2.4 webpack자동 패키징 기능 구성

1. npm install webpack-dev-server –D명령을 실행 하여 자동 프로젝트 패키징을 지원하는 도구 설치
2. 다음과 같이 명령을 수정 package.json -> scripts하십시오 dev.

"scripts": {
    
    
    "dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
}

3. 윌 src -> index.html의 script스크립트 참조 경로는 수정"/buldle.js“
4. 실행 npm run dev명령 및 재 패키지
5. 브라우저의 http://localhost:8080주소 를 방문하여 자동 패키징 효과 를 확인하십시오.

참고 :

• webpack-dev-server실시간 패키지 http서버를 시작 합니다.
• webpack-dev-server패키지에서 생성 된 출력 파일은 기본적으로 프로젝트 루트 디렉터리에 배치되며 가상이며 보이지 않습니다.

2.5 html-webpack-plugin미리보기 페이지 를 생성하도록 구성

1. npm install html-webpack-plugin –D명령을 실행하여 미리보기 페이지를 생성하는 플러그인을 설치하십시오.
2. webpack.config.js파일 헤더 영역을 수정하고 다음 구성 정보를 추가하십시오.

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    
     // 创建插件的实例对象
    template: './src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
});

3. webpack.config.js파일에서 외부에 노출 된 구성 개체를 수정 하고 다음 구성 노드를 추가합니다.

module.exports = {
    
    
    plugins: [htmlPlugin] // plugins 数组是 webpack 打包期间会用到的一些插件列表
}

2.6 자동 패키징과 관련된 매개 변수 구성

 // package.json中的配置
 // --open 打包完成后自动打开浏览器页面
 // --host 配置 IP 地址
 // --port 配置端口
 "scripts": {
    
    
     "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
 },

3. webpack로더

3.1 loader비 js모듈 패키징

실제 개발 과정에서는 webpack기본적으로 .js접미사 이름으로 끝나는 모듈 만 패키징하고 처리 할 수 ​​있습니다 . .js접미사 이름으로 끝나지 webpack않는 다른 모듈은 기본적으로 처리 할 수 ​​없습니다. loader정상적으로 패키징 하려면 로더 를 호출 해야합니다. 그렇지 않으면 오류가 발생합니다. 보고됩니다!

loader로더는 webpack다음과 같은 특정 파일 모듈의 패키징 및 처리를 지원할 수 있습니다 .

• less-loader.less관련 파일을 패키징하고 처리 할 수 있습니다.
• sass-loader.scss관련 파일을 패키징하고 처리 할 수 있습니다.
• url-loader그것은 거래를 포장 할 수 css와 url파일 관련 경로

3.2 loader호출 프로세스

3.3 webpack에서 로더의 기본 사용

3.3.1 패키지 처리 css파일

1. 실행 npm i style-loader css-loader -D명령을 설치하고 공정css 文件的 loader
2. 에서는 배열의 규칙 첨가가 아니라 다음이다 :webpack.config.jsmodule -> rulesloader

// 所有第三方文件模块的匹配规则
module: {
    
    
    rules: [
        {
    
     test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
}

그 중에서도 test, 일치하는 파일 형식을 나타내는 use대응 나타내는 파일을 호출 할를 loader및 실행하는 전면 뒤에서

참고 :

• use배열에 지정된 loader순서는 고정되어 있습니다.
• 여러 loader통화의 순서는 다음과 같습니다. 뒤에서 앞으로 전화

3.3.2 패키지 처리 less파일

1. 실행 npm i less-loader less -D명령
2. 에서는 배열의 규칙 첨가가 아니라 다음이다 :webpack.config.jsmodule -> rulesloader

 // 所有第三方文件模块的匹配规则
 module: {
    
    
     rules: [
         {
    
     test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
     ]
 }

3.3.3 패키지 처리 scss파일

1. 실행 npm i sass-loader node-sass -D명령
2. 에서는 배열의 규칙 첨가가 아니라 다음이다 :webpack.config.jsmodule -> rulesloader

 // 所有第三方文件模块的匹配规则
 module: {
    
    
     rules: [
         {
    
     test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
     ]
 }

3.3.4 postCSS자동으로 추가 된 css호환 접두사 구성

1. 실행 npm i postcss-loader autoprefixer -D명령
2. 프로젝트 루트 디렉터리에 postcss구성 파일 을 postcss.config.js만들고 다음 구성을 초기화합니다.

const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
    
    
    plugins: [autoprefixer] // 挂载插件
}

3. 에서는 배열, 수정 규칙은 다음과 같이이다 :webpack.config.jsmodule -> rulescssloader

module: {
    
    
    rules: [
        {
    
     test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
    ]
}

3.3.5 스타일 시트에 그림 및 글꼴 파일 압축

1. 실행 npm i url-loader file-loader -D명령
2. 에서는 배열의 규칙 첨가가 아니라 다음이다 :webpack.config.jsmodule -> rulesloader

module: {
    
    
    rules: [{
    
    
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        use: 'url-loader?limit=16940'
    }]
}

참고 :

• 어떤 ?이후 loader매개 변수 항목
• limit사진의 크기를 지정하는 데 사용, 단위는 바이트 (이다 byte) 만 limit사진을 댄 작은 크기로 변환됩니다 base64사진

3.3.6 패키지 처리 js파일의 고급 구문

1. babel변환기 관련 패키지를 설치 합니다.npm i babel-loader @babel/core @babel/runtime -D
2. babel구문 플러그인과 관련된 패키지를 설치 합니다.npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D
3. 프로젝트 루트 디렉터리에서 babel구성 파일을 만들고 babel.config.js다음과 같이 기본 구성을 초기화합니다.

module.exports = {
    
    
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposalclass-properties']
};

4. 에서는 배열의 규칙 첨가가 아니라 다음이다 :webpack.config.jsmodule -> rulesloader

// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
{
    
     test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }