학습 webpack4 구성 (A)

웹팩은 현대적인 자바 스크립트 응용 프로그램입니다 정적 포장 모듈 (모듈 Bundler를) . 웹팩 응용 프로그램을 처리 할 때, 재귀 구성 종속성 그래프 (종속성 그래프) 각 모듈은 원하는 애플리케이션이 모든 모듈이 다음 중 하나 이상으로 패키지화 포함하고, 번들 .

1. 웹팩 설치

　　초기화 package.json을 생성하는 초기화 1.1 프로젝트 NPM에있을 필요가

1.2 NPM 설치 웹팩 웹팩 -D-CLI

2.webpack 구성

웹팩의 일부를 구성하는 webpack.config.js 파일의 루트 디렉토리에 생성 된 모든 구성 항목은 웹팩으로 구성됩니다. src 디렉토리 및 디렉토리를 생성합니다. 다음 src 디렉토리와는하는 index.js 파일과 HTML 파일을 만듭니다.

index.html 파일에서 div 태그를 쓰기

<! DOCTYPE HTML> 
<HTML LANG = " EN " > 

<head> 
    <메타 캐릭터 = " UTF-8 " > 
    <메타 NAME = " 뷰포트 " 함량 = " 폭 = 기기 폭 초기 스케일 = 1.0 " > 
    < 메타 HTTP-당량 = " X-UA-지원 " 내용 = " 즉 = 엣지 " > 
    <제목> 웹팩配置学习</ 제목> 
</ head> 

<body> 
    <DIV ID = " 루트 " > </ DIV>
</ BODY> 

</ HTML>

웹팩 구성 디렉토리

CONST 경로 = 제 (필요 ' 경로 ' ) 
module.exports = { 
    : MODE ' 개발 ' , 
    항목 : ' ./src/index.js '  // 입력 파일 
    출력 : { 
        // 출구 
        경로 : path.resolve (__ dirname은, ' DIST ' ), // 패키지 디렉토리를 생성
         하는 index.js'// : 파일 이름 ' 하나의 js를 사용하여 파일 이름 디렉토리 생성, 파일을      } }

멀티 팩 구성 파일, 두 개의 JS 파일 인 경우

항목 : { 
        주 : ' ./src/index.js ' , // 입력 파일 
        하위 : ' ./src/index.js ' 
    }

이번에는 당신은 파일 이름에 출력을 구성해야

파일 이름 : ' [이름] 된 .js '  // 디렉토리 파일의 js의 복수를 생성 할 때 패키지를

2.1webpack 구성 사진

하는 index.js에 쓰기, 내 src 디렉토리에 사진을 준비

수입 아바타 에서  ' ./item.png ' 

var에 IMG = 새 이미지 () 

img.src = 아바타 

var에 루트 = document.getElementById를 ( ' 루트 ' ) 

root.append (IMG)

구성 모듈 (Module1의) 제 설치된 웹팩, 선택 장착 실

원사 추가 URL 로더 --save-DEV

모듈 1 : { 
        규칙 : [ 
            { 
                테스트 : /\.(png|jpg|gif)$/ , 
                사용 : { 
                    로더 : ' URL-로더 ' , 
                    옵션 : { 
                        이름 : ' [이름] _ [해시] [EXT]. ' , // 사진 이름과 해시 값 
                        OutputPath : ' ImagesRF 로열티 무료 /가 ' , // 압축 된 사진 후 내부에 저장된 디렉토리 
                        제한 : 10240 
                            //를 보다 10,240 바이트, 포장 카탈로그와 사진을 생성 할 경우 크기가 설정되어 사진을 제한, 크기가 설정 이하인 경우, 기본은 JS의 압축 base64로 포장됩니다 
                    }
                }
            } 
        ] 
    },

package.json 구성 파일에서 각 실행 NPM 실행 디바이스는 포장됩니다, 루트 디렉토리에 DIST 디렉토리를 생성합니다

" 스크립트 " : {
         " DEV " : " 웹팩 " 
    },

CSS의 2.2webapck ( SCSS ) 전처리

다음 플러그인을 설치하기 위해 먼저 필요

원사 CSS 로더 --save- 추가 dev에 
노드를 추가 원사를 -sass --save- dev에 
실을 추가 말대꾸 -loader --save- dev에 
실을 추가하는 SCS -loader --save- dev에 
실을 스타일을 추가 --save-DEV -loader

webapck로 작성된

모듈 1 : { 
        규칙 : [ 
            { 
                테스트 : /\.scss$/ ,
                 // CSS 로더 프로세싱 문서 스타일 로더 CSS를 CSS-로더하는 SCS를 전처리하는 라벨에 장착 된 파일 헤더, 말대꾸 로더를 취급 구성, postcss 로더 처리 CSS의 접두어 
                를 사용 : [
                     ' 스타일 로더 ' , 
                    { 
                        로더 : ' CSS-로더 ' , 
                        옵션 : {

　　　　　　　　　　　　　　　　모듈 : 참으로, // 모듈 패키징
　　　　　　　　　　　　　　　 importLoaders : 2  // 각 하중 수행 사스 로더 로더 postcss한다  　　　　　　　　　　　　　　} 　　　　　　　　　　　　} 　　　　　　　　　　　　' 사스 로더 ' , ' postcss 로더 '   브라우저 프리픽스 　　　　　　　　　　] 　　　　　　　　} 　　　　　　] 　　　　},

당신은 모듈 형 프로세스를 CSS하려면 구성해야

옵션 : { 
　모듈 : true로 , // 모듈 형 패키지, 
　importLoaders : 2  // 각로드가 수행 말대꾸 로더 로더됩니다 postcss   
}

SCSS, 디렉토리에 파일을 생성 간단한 CSS 파일을 작성

본체 { 
    .avatar { 
        폭 : 50 %; 
        국경 : 1 픽셀의 빨간색으로; 
        변환 : 변환 (100 픽셀을 100 픽셀); 
    } 
}

　필기하는 index.js 파일

수입 아바타 에서  ' ./item.png '

'./createdAvatar.js'JS 파일에서 수입 createdAvatar는 통합



수입 스타일 에서  ' ./index.scss ' 
var에 IMG = 새 이미지 () 

img.src = 아바타 

img.classList.add (style.avatar) 

var에 루트 = document.getElementById를 ( ' 루트 ' ) 

root.append (IMG)

createdAvatar () // 사용

다음의 js 파일을 만들고는,하는 index.js 파일을 도입

'./item.png'에서 수입 아바타 

기능 createdAvatar () { 
    var에 IMG = 새 이미지 () 
    img.src = 아바타; 
    img.classList.add ( '아바타') 
    VAR 루트 = document.getElementById를 ( '루트'); 
    root.append (IMG) 
} 

수출 기본 createdAvatar;

　　패키지가 브라우저에서 볼 수 후에는 스타일이없는

위의 CSS에서, 우리는 CSS3를 사용하지만 브라우저가 자동으로 나에게 접두사를 추가하지 않습니다,이 시간, 우리는 수동으로 일부를 구성해야합니다.

安装
실 추가 postcss -loader --save-DEV

Postcss.config.js, 당신의 루트 디렉토리에 파일을 작성해야합니다

安装
실 추가 autoprefixer의 --save-DEV

사용,

= {module.exports의 
    플러그인 [ 
        는 ( 'autoprefixer')를 요구 
    ] 
} 

// 접두어 처리 자동 다른 브라우저 문제 CSS

　　그런 다음 postcss 로더를 사용하여 CSS를 구성, 패키지를 실행, 그것은 일부 CSS3 브라우저 자동 접두사, 브라우저에서 다시 볼 수 있습니다

2.3webpack对字体进行处理

先行iconfont下载一些字体，放入自己的src目录里面，需要在index.js文件引入并使用

import './iconfont.scss'

var root = document.getElementById('root')
root.innerHTML = "<div class='iconfont iconchangjingguanli'></div>"

然后需要在webpack进行一些配置，首先安装一个插件

yarn add file-loader --save-dev

使用

module: {
        rules: [{
                test: /\.(eot|ttf|svg)$/,
                use: {
                    loader: 'file-loader'
                }
            }
        ]
    },

再次运行npm run dev打包之后，可以在浏览器看到我们的字体图标了

2.4webpack配置html打包文件处理

如果想每次打包之后，dist目录都会给我们生成一个html文件，这时候需要安装一个插件

yarn  add html-webpack-plugin --save-dev

然后在webapck.config.js文件中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

　使用 HtmlWebpackPlugin打包之后自动生成html文件，

plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ],

每次打包需要重新更新一下dist目录，删除里面的文件，重新生成一个新的，这时候需要安装另一个插件

yarn  add  clean-webpack-plugin --save-dev

　也是需要在webpack.config.js引入

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

　　使用和HtmlWebpackPlugin一样

plugins: [
        // HtmlWebpackPlugin打包之后自动生成html文件，
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        // CleanWebpackPlugin打包之前先自动清除dist目录里面所有的文件，
        new CleanWebpackPlugin()
    ],

2.5SourceMap配置，用于检测在代码打包之后，检测问题，定位到那个行

module.exports = {
    devtool: 'cheap-inline-source-map',
}

　　配置选项如下

　　//source-map 打包之后会生成map文件，性能比较慢，用于检测代码打包之后错误信息提示

    //eval 打包最快，不会生成.map文件，

    //inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在development 开发环境  使用cheak-module-eval-source-map,不会生成.map文件，但是集成在打包之后main.js中eval中

    //cheap-inline-source-map 打包不会生成.map文件，在打包的js文件生成base64

    //如果是在production 线上环境 使用cheak-module-source-map,会打包生成.map文件

webpack配置插件特别多，需要慢慢的来，理解常用的场景配置就可以了。剩下的需要单独查阅资料就可以了解其中配置以及原理

학습 webpack4 구성 (A)

추천