프런트 엔드 자동화 프로젝트의 빌드 도구 --Webpack 시작 자습서

　　참조 : https://www.webpackjs.com/ (중국어 문서)    https://www.webpackjs.com/ (공식 문서)

　　원하는 인스턴스 관련 운동을하는 경우,이 문서는 이론적 인 근거로 사용할 수 있습니다, 첫째, 설명 할 필요가있다,이 문서가 웹팩 기본 구성 특성을 설명에 초점을 맞추고, 포함되지 않은 경우는, 설명 양식을 이해하기 쉬울 것이다;

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

　　그래서 우리 국민 단어 : 웹팩 프런트 엔드 모듈 식 솔루션을 더 강조 패키지입니다, 당신은 모듈 중 하나로 볼 수 개발 리소스 파일 (이미지, JS 파일, CSS 파일 등)을 넣어 통해 수 웹팩 브라우저 렌더링 속도의 리프팅을 용이하게하기 위해 로더 (로더)과 생산 라인 환경에 패킹 처리, 통합 및 압축 플러그 (플러그), 작은 파일 리소스를 제공;

　　처음에 우리는 얼마나 네 가지 핵심 개념의 웹팩을 이해해야합니다 :

　　　　입구 (항목)

　　　　출구 (출력)

　　　　로더 (로더)

　　　　플러그인 (플러그인)

 

 

　　입구 (항목) :　

　　　　웹팩 유입구 웹팩 입구 구성 파일에 의해 표시 수단, 즉 시작하는 경우, 우리는 속성 웹팩 진입 경로를 지정하는 파일의 항목을 구성 할 수있다;

　　　　　우리는 간단한 경우를 볼 수 있습니다 :

　　　　　

//이 모듈 던져에 액세스 가능해야 웹팩 
module.exports = {
   // 항목이 엔트리 파일 속성 값 상대 경로 지정   
  항목 : './src/app.js를' 
}

 

　　종료 (출력) :

　　　그것은 생성하고, 파일, 파일 디렉토리 경로 출력의 이름을 어떻게 곳 웹팩 수출 출력 번들을 알려줍니다, 당신은 출력 속성을 추가하여 웹팩 패키지를 사용할 때 즉, 웹팩를 통해 패키지의 최종 출력을 설정 출력 파일 이름과 경로;

　　

// 노드 모듈의 도입로 
CONST = 경로는 ( '패스'요구 ) 

module.exports = {
   // 웹팩 실행 항목 파일 
  항목 './src/app.js' ,
    @ 콘센트 
  출력 {
     // 모든 파일에 따라 모듈의 조합 된 출력은 bundle.js 
    'bundle.js은'이름 ,
     // 디렉토리 DIST로 출력 파일 
   // __dirname 노드 환경에서 전역 변수 현재 디렉토리 나타내는 
    , path.resolve (__이 dirname : 클리핑 './dist' ) 
  } 
};

 

 

 

　　로더 (로더)

　　　　　로더는, 다음의 용량 웹팩 팩 수 (자체 웹팩 기본 JS와 ES5 식별 할 만 수) 파일의 일부 비에 javscript 유형을 처리 할 웹팩 수 있도록 처리 할 수있는 효과적인 모듈 웹팩에, 로더는 모든 유형의 파일이 될 수있다 이러한 파일 처리, 로더는 두 가지로 구성된다 :

　　　　　테스트 : 정규 표현식은 일반적으로 파일 형식을 일치시키는 데 사용된다

　　　　　사용 : 열쇠가 될 수 있습니다 값을 배열의 형태로하는 파일을로드 할 로더를 웹팩 무엇을 말할 수 있습니다

　　

// 노드 모듈의 도입로 
CONST = 경로는 ( '패스'요구 ) 

module.exports = {
   // 웹팩 실행 항목 파일 
  항목 './src/app.js' ,
    @ 콘센트 
  출력 {
     // 모든 파일에 따라 모듈의 조합 된 출력은 bundle.js 
    'bundle.js은'이름 ,
     // 디렉토리 DIST로 출력 파일 
   // __dirname 노드 환경에서 전역 변수 현재 디렉토리 나타내는 
    , path.resolve (__이 dirname : 클리핑 './dist' ) 
  } 
    // 로더를 구성해야 모듈 키워드 
    {Module1의이
         // 배열의 규칙은, 각 로더의 구성 저장 
        규칙 [ 
            { 
                // 테스트 특성을 구성해야한다 파일을 일치시키기위한 정규 표현식
                테스트 :. / \ CSS의 $ / ,
                 // 같은 파일 로더의 복수의 도입 방법 
                사용 :
                     // 이름은 구성해야 로더 로더, 문자열입니다 
                    {: 로더 "스타일 로더" } , 
                    {로더 : "CSS-로더" } 
                , 
                
                // 에 node_module 디렉토리 파일을 제거하는 필터 
                익스 클루 : / node_module / ,
                 // 지정된 범위 .css 파일이 지정된 파일 / 데모 / 디렉토리 일치 일치 
                등을 : / 데모 / 
            } 
        ] 
    } 
    

};

 

　　웹팩 규정 웹팩 로더의 정의, 우리는 그렇지 않으면 오류가 발생하지, module.rules에 정의해야합니다, 테스트 및 파일을 일치하는 규칙을 지정하는 두 개의 속성을 사용하고이 두 속성은 필수입니다 무엇 로더를 처리 선거 제외, 각각의 파일에 (처리되지 않습니다), 여과하고, 파일 폴더에있는 파일 (처리) 지정을 포함,이 두 속성은 선택 사항입니다

 

　　플러그인 (플러그인) :

　　　　로더는 태스크의 넓은 범위를 수행하기 위해 사용될 수있는 플러그 블록의 특정 형식을 변환하는 데 사용된다. 플러그인의 범위는 포장 최적화 및 압축, 환경 변수를 재정의 할 수있는 모든 방법에서, 포함한다. 매우 강력한 플러그인 인터페이스는 다양한 작업을 처리하는 데 사용할 수 있습니다. 플러그인을 사용하려면 플러그인 (소개)를 요구해야하고, 다음 플러그인 배열에 추가, 대부분의 플러그인은 옵션 옵션을 사용하여 사용자 정의 할 수 있습니다

 

 

// 노드 모듈의 도입로 
CONST = 경로는 ( '패스'요구 )
 // 도입 추출물 텍스트 웹팩 - 플러그인 위젯 
CONST = 요구] ( '추출물 텍스트 웹팩 - 플러그인'ExtractTextPlugin ) 

module.exports = {
   / / 웹팩 실행 엔트리 파일 
  항목 './src/app.js' ,
    // 출구 
  출력 {
     // 파일에 종속 된 모든 모듈이 결합 bundle.js 출력 
    파일명 : "bundle.js ' ,
     // 출력 파일 DIST 디렉토리에 넣어 
   // 현재 디렉토리 나타내는 __dirname 노드 환경 전역 변수입니다 
    경로 : path.resolve를 (__ dirname이, './dist' ) 
  } 
    // 로더 구성해야하는 모듈 키워드, 
    모듈 : {
        // 배열의 규칙은 각 로더의 구성 저장 
        규칙 : [ 
            { 
                // 테스트 속성을 구성해야합니다, 파일 매칭을위한 정규 표현식입니다 
                :. 테스트 / \ CSS의 $ / ,
                 // 같은 파일에 도입 로더, 상기 복수의 방법을 
                사용 :
                     // 이름 구성해야 로더 로더는 문자열 
                    { "스타일 로더"로더 } 
                    {로더 "CSS 로더" } 
                ,] 
                
                // 필터 디렉토리에 node_module 제외 파일 
                는 제외 : / node_module / ,
                 // 범위 .css 파일이 일치 지정된 지정된 파일 / 데모 / 디렉토리 일치 
                (가) 포함 / 데모 / 
            }
        ] 
    } 
    // 구성 위젯 
    플러그인 :
     새로운 새 ExtractTextPlugin ({
       // 맞춤 구성 옵션 위젯 
      // 파일의 .CSS의 .js 파일명으로부터 추출 된 
      파일명 : '[이름] _ [ MD5 : contenthash : 헥스 8 ] .css`, 
    }) 
] 
};

 

　　위의 네 가지 핵심 개념은 웹팩이다,의 몇 가지 일반적인 플러그인을 소개하자 :

　　

　　로더 프로세싱 CSS와 사스 :

　　　　기본적으로 웹팩은 CSS 코드를 처리하는 것이 아니라, 우리는 로더 웹팩에 의해 처리 될 수있다;

　　　　  

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

 

 

在日常开发中，我们只需要在webpack.config.js文件中写上上面的配置代码即可让webpack来处理CSS代码和Sass代码；

 

 

 

　　webpack-dev-server：

　　　　　　webpack-dev-server是webpack的一个常用插件，可以用来在本地上开启服务、启动浏览器并且可以实时监听文件修改；

　　　　

module.exports = {
  entry: './src/app.js',
  ...
    //进行webpack-dev-server插件配置
  devServer: {
    //端口号，默认8080，可以自定义修改
    port: 9000,
   //运行webpack-dev-server的时候自动打开浏览器
    open: true
  },
  ...
};

 

 

 

　　source-map调试：

　　　　开发总是离不开调试，但是我们用webpack给项目打包了之后，我们是很不方便找到错误或者问题所在的，当然webpack也想到了这一点，因此webpack给我们提供了source-map来进行调试；

　　　　

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　source-map　

　　　　配置结果　　　　　　　　　　　　

　　　　在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；

 

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　cheap-module-source-map

　　　　配置结果　　　　　　　　　　　　

　　　　在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；

 

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　eval-source-map

　　　　配置结果　　　　　　　　　　　　　

　  　　使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；

 

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　cheap-module-eval-source-map　

　　　　配置结果　　　　　　　　　　　　　

　　　　这是在打包文件时最快的生成source map的方法，生成的Source Map会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

 

 

　　综上所述，从上到下打包速度越来越快，不过同时带来的副作用也越多，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。在中小型项目中，eval-source-map是一个比较不错的选择；

cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。

 

module.exports={
    devtool:"eval-source-map",
}

　　在webpack打包之后，如果报错我们是看不到源文件的，因为此时文件已经被webpack打包了，这很不方便我们的开发调试，source-map就是用来解决这个问题的，通过添加配置devtool:"eval-source-map"这一行简单的代码，我们即可在调试的时候看到我们的源文件进行调试；