Webpack 내부 원리와 플러그인 개발

/**
 * webpack      '      '
 *     ，        ：compiler、compilation
 * @param options
 * @constructor
 */
function MyPlugin(options) {
  //    options       
}
//               
MyPlugin.prototype.someFunc = function() {
  /*something*/
};

// apply        ，            （new somePlugins({})），webpack       apply     
MyPlugin.prototype.apply = function(compiler) {
  // compiler   ？compiler webpack '   '  

  // compiler.plugin('***') compilation.plugin('***')    ？
  // document.addEventListener   ？      
  // compiler.plugin('***')     compiler       
  //   compiler.plugin('compile')   ：       compile   ，        

  // compile（'   ' '    '       ）
  compiler.plugin('compile', function(params) {
    console.log('The compiler is starting to compile...');
  });

  // compilation（'   ' '  ing'       ）
  compiler.plugin('compilation', function(compilation) {
    console.log('The compiler is starting a new compilation...');
    //  compilation     ，      compilation  ，               
    //        compiler compilation，         ，         
    // optimize('    ' '    '       )
    compilation.plugin('optimize', function() {
      console.log('The compilation is starting to optimize files...');
    });
  });

  // emit（'   ' '      '       ）
  compiler.plugin('emit', function(compilation, callback) {
    console.log('The compilation is going to emit files...');

    // compilation.chunks     （          ，          ）
    compilation.chunks.forEach(function(chunk) {
      // chunk.modules      （   webpack      ， import、require module）
      //      ：chunk.modules    ，   chunk.files       
      chunk.modules.forEach(function(module) {
        // module.fileDependencies       ，      【  ， css @import("reset.css")，   reset.css  fileDependencie】
        module.fileDependencies.forEach(function(filepath) {
          //     ，         
        });
      });

      //           
      chunk.files.forEach(function(filename) {
        // source()           
        var source = compilation.assets[filename].source();
      });
    });

    // callback       
    callback();
  });
};

//   compiler compilation           ，  API     http://www.css88.com/doc/webpack2/api/plugins/

module.exports = MyPlugin;

Webpack 사용자 정의 로더 및 플러그인
Webpack 핵심의 두 모듈은 바로 Loaders와 Plugins이다. Loaders는 다양한 자원, 스타일과 스크립트 파일을 불러오고 Plugins는 불러온 파일을 처리하여 컴파일된 파일로 출력한다.마운트는 직렬로 연결할 수 있다.파이프를 통해 자원을 처리할 수 있으며, 마지막 로더는 자바스크립트로 출력해야 하며, 중간의 다른 로더는 다음 로더로 임의의 형식을 출력할 수 있습니다.
Loaders
마운트는 자원 파일을 인덱스로 다른 자원 파일로 변환하는 node입니다.js 함수.예를 들어 웹 패키지에서 커피스크립트나 JSX 파일을 불러올 수 있도록 마운트기를 사용할 수 있습니다.로더의 기본 사용은 다음과 같습니다.

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: "style!css" },
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel?stage=0'}
        ]
    }
};

설치 로더는 일반적으로 npm를 통해 직접 설치할 수 있습니다.

$ npm install xxx-loader --save

$ npm install xxx-loader --save-dev

강제 요구는 아니지만, 관례적으로 로더를 XXX-loader라고 명명하는데, 그 중에서 XXX는 로더의 이름이다. 예를 들어 json-loader.전칭 (실제 이름) 을 통해 마운트 (예: json-loader) 를 인용할 수도 있고, 간략한 이름으로 인용할 수도 있다. (예: json)로더의 이름 규칙과 검색 우선 순위는 웹 패키지의 설정api resolveLoader입니다.moduleTemplate에서 지정합니다.
Require를 통해 참조
리퀘스트 문장(또는 define,require.ensure 등)을 통해 마운트를 지정할 수 있습니다. 사용하기만 하면 됩니다!자원을 분리하면 됩니다. 각 부분은 현재 디렉터리와 같습니다.

require("./loader!./dir/file.txt");
// =>          "loader.js"     "dir"      "file.txt"   

require("jade!./template.jade");
// =>    "jade-loader" （   npm     "node_modules"   ）    "template.jade"   

require("style!css!less!bootstrap/less/bootstrap.less");
// =>    github      "node_modules"      "bootstrap"      "less"      "bootstrap.less"
//          "less-loader"   ，     "css-loader"   ，    "style-loader"   

프로파일을 통해 사용
구성 파일에 정규로 로더를 바인딩할 수 있습니다.

{
  module: {
    loaders: [
      { test: /\.jade$/, loader: "jade" },
      // => "jade" loader is used for ".jade" files

      { test: /\.css$/, loader: "style!css" },
      // => "style" and "css" loader is used for ".css" files
      // Alternative syntax:
      { test: /\.css$/, loaders: ["style", "css"] }
    ]
  }
}

명령줄에서 사용
CLI 확장 매개변수를 사용하여 로더를 바인딩합니다.

$ webpack --module-bind jade --module-bind 'css=style!css'

상기 명령은 .jade 파일에 jade 마운트기를 연결하고 .css 파일에 style와 css 마운트기를 정했다.
질의 매개변수
Loader를 사용할 때 조회 웹 스타일의 문자열을 통해 다음과 같은 조회 매개 변수를 지정할 수 있습니다. url-loader?mimetype=image/png검색 문자열의 형식은 마운트를 보아야 하며, 구체적인 형식은 마운트 문서를 참고해야 한다.대부분의 마운트는 일반적인 검색 형식(?key=value &key2=value2)과 JSON 대상(?{"key":"value", "key2":"value2"})을 지원합니다.

require

require("url-loader?mimetype=image/png!./file.png");

구성 파일

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

또는

{
    test: /\.png$/,
    loader: "url-loader"
    query: { mimetype: "image/png" }
}

명령줄

webpack --module-bind "png=url-loader?mimetype=image/png"

스크립트

babel-6-0-20-modules-feature-not-work-in-ie8은 기본적으로 Babel을 사용하여 JS의 문법 컴파일을 할 것입니다. 설치할 때 다음과 같은 npm 명령만 사용하면:

npm install babel-loader --save-dev

구성 파일에서 다음을 수행합니다.

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      }
    ]
  }

Style-Checker
ESLint-Loader
npm 명령을 사용하여 직접 설치하면 됩니다.

$ npm install eslint-loader

Webpack의 구성 파일에서 다음과 같이 수정해야 합니다.

module.exports = {
  // ...
  module: {
    loaders: [
      { test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/ }
    ]
  } // ...
};

만약 다른 컴파일러를 사용했다면, 예를 들어 babel-loader, loaders의 순서를 반드시 주의해야 한다. 그렇지 않으면 파일은 Babel 처리를 한 후에 형식 검사를 할 수 있다.

module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel-loader', 'eslint-loader'],
        exclude: /node_modules/
      }
    ]
  } // ...
};

보안상, 다른 마운트에 영향을 주지 않고 preLoaders 부분에서 원본 파일을 검사할 수 있습니다.

module.exports = {
  // ...
  module: {
    preLoaders: [
      { test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/ }
    ]
  } // ...
};

Custom
Custom Loaders(사용자 정의 로더)
Custom Plugins(사용자 정의 구성 요소)