웹팩의 중요한 기능인 Plugins에 대해 간단히 이야기하다

웹팩에서 또 다른 중요한 기능은 Plugins입니다.
플러그인(Plugins)은 웹 패키지 기능을 확장하는 데 사용되며 전체 구축 과정에서 효력이 발생하여 관련 작업을 수행합니다.Loaders와 Plugins는 자주 헷갈리지만, 그들은 완전히 다른 것이다. Loaders는 패키지 구축 과정에서 원본 파일을 처리하는 데 사용된다. (JSX, Scss, Less.)한 번에 하나씩 처리하기;플러그인은 하나의 파일을 직접 조작하지 않으며, 전체 구축 과정에 직접적으로 작용한다.
웹 패키지에는 내장된 플러그인도 많고 제3자 플러그인도 많아서 우리가 더욱 풍부한 기능을 완성할 수 있다.
1. 플러그인을 사용하는 방법
어떤 플러그인을 사용하려면 npm를 통해 설치한 다음 웹 패키지에 설치해야 합니다.config.js의plugins 키워드 부분에 이 플러그인을 추가하는 실례 (plugins는 하나의 그룹이고 new는 하나의 플러그인입니다.)
저작권 공지를 위한 플러그인을 추가하는 경우:

module.exports = {
  		devtool: 'eval-source-map',
  		entry:  __dirname + "/app/main.js",
  		output: {...},
	module: {
    			loaders: [
      				{ test: /\.json$/, loader: "json" },
      				{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
      				{ test: /\.css$/, loader: 'style!css?modules!postcss' }//    PostCSS
    			]
 	},
  		postcss: [
    			require('autoprefixer')
  		],
  		plugins: [
    			new webpack.BannerPlugin("Copyright Flying Unicorns inc.")  
	],
	devServer: {...}
}

2. 자주 사용하는 플러그인 몇 개
1) HtmlWebpackPlugin
이 플러그인의 역할은 간단한 템플릿에 따라 최종 Html5 파일을 생성하는 데 도움을 줍니다. 이 파일은 포장된 JS 파일을 자동으로 인용합니다.매번 컴파일할 때마다 파일 이름에 다른 해시 값을 삽입합니다.
설치 명령: npm install --save-dev html-webpack-plugin
이 플러그 인은 이전에 수동으로 수행한 작업을 자동화하여 정식으로 사용하기 전에 프로젝트 구조를 변경해야 합니다.
①public 폴더를 제거하고 이 플러그인을 사용하면 HTML5 파일이 자동으로 생성되며 CSS는 앞의 조작을 통해 JS로 압축됩니다.
② app 디렉토리에서 HTML 파일 템플릿 index를 만듭니다.tmpl.html, 이 템플릿은 title 등 기타 필요한 요소를 포함하고 컴파일 과정에서 이 플러그인은 이 템플릿에 따라 최종 HTML 페이지를 생성하고 의존하는 css, js,favicon 등 파일을 자동으로 추가합니다. 템플릿 소스 코드는 다음과 같습니다.

③ 웹 패키지의 프로필을 업데이트합니다. 방법은 마지막 출력 파일을 저장하기 위해build 폴더를 새로 만듭니다.

var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  		devtool: 'eval-source-map',
  		entry:  __dirname + "/app/main.js",
  		output: {
    			path: __dirname + "/build",
    			filename: "bundle.js"
  		},
	module: {
    			loaders: [
      				{ test: /\.json$/, loader: "json" },
      				{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
      			{ test: /\.css$/, loader: 'style!css?modules!postcss' }
    		]
  		},
  		postcss: [
    			require('autoprefixer')
  		],
  		plugins: [
    			new HtmlWebpackPlugin({
      				template: __dirname + "/app/index.tmpl.html"//new          ，        
    			})
  		],
	devServer: {
    			colors: true,
    			historyApiFallback: true,
    			inline: true
  		}
}

 
2) Hot Module Replacement
HMR(Hot Module Replacement)도 웹 패키지에서 유용한 플러그인으로 구성 요소 코드를 수정한 후 수정된 효과를 실시간으로 미리 볼 수 있도록 한다.웹팩에서 HMR을 구현하는 것도 간단합니다. 두 가지 구성만 하면 됩니다.
① 웹팩 프로필에 HMR 플러그인을 추가합니다.
② Webpack Dev Server에 "hot"매개 변수를 추가합니다.
그러나 이것들을 설정한 후에 JS 모듈은 자동으로 핫로드를 할 수 없다. JS 모듈에서 Webpack이 제공하는 API를 실행해야만 핫로드를 실현할 수 있다. 비록 이 API는 사용하기 어렵지 않지만React 모듈이라면 이미 익숙한 Babel을 사용하면 기능 핫로드를 더욱 편리하게 실현할 수 있다.
구체적인 실현 방법은 다음과 같다.
① Babel과 webpack은 독립된 도구입니다.
② 양자가 함께 일할 수 있다.
③ 둘 다 플러그인을 통해 기능을 확장할 수 있다.
④ HMR은 웹 패키지 플러그인으로 브라우저에서 모듈이 수정된 효과를 실시간으로 관찰할 수 있지만, 작업시키려면 모듈에 추가 할당액이 필요합니다.
⑤ Babel에는 React-transform-hrm이라는 플러그인이 있는데 React 모듈에 추가 설정을 하지 않는 전제에서 HMR을 정상적으로 작동시킬 수 있다.

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  		devtool: 'eval-source-map',
  		entry: __dirname + "/app/main.js",
  		output: {
    			path: __dirname + "/build",
    			filename: "bundle.js"
  		},
  		module: {
    			loaders: [
      				{ test: /\.json$/, loader: "json" },
      				{ test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
      				{ test: /\.css$/, loader: 'style!css?modules!postcss' }
    			]	
  		},
  		postcss: [
    			require('autoprefixer')
  		],
	plugins: [
    			new HtmlWebpackPlugin({
      				template: __dirname + "/app/index.tmpl.html"
    			}),
    			new webpack.HotModuleReplacementPlugin()//     
  		],
	devServer: {
    			colors: true,
    			historyApiFallback: true,
    			inline: true,
   			hot: true
  		}
}

react-transform-hmr 설치:npm install --save-dev babel-plugin-react-transform react-transform-hmr
Babel 구성

{
  		"presets": ["react", "es2015"],
 		"env": {
    			"development": {
    				"plugins": [["react-transform", {
       				"transforms": [{
         					"transform": "react-transform-hmr",
					"imports": ["react"],
					"locals": ["module"]
       				}]
     				}]]
		}
    		}
}

React를 사용할 때 모듈을 핫 로드할 수 있습니다.