Webpack v4 webpack-concat-plugin Deprecation Warning이 거슬릴 때
Webpack v4 webpack-concat-plugin Deprecation Warning이 거슬릴 때
Webpack v4로 바뀌면서, 이래저래 기존 Plugin이 보조를 맞춰 올라오지 못하는 경우가 많다. 그러다 보니, 원하지 않는 메시지를 보게 되는데, 결과를 얻는데는 문제가 없더라도, 아무래도 거슬릴 수밖에 없다.
표시되는 메시지
node run production
> xxx_xx_5.0.2@0.0.1 production /xxx_xx.5.0.2
> cross-env NODE_ENV=production webpack --colors --config webpack.config.js
clean-webpack-plugin: /xxx_xx.5.0.2/production has been removed.
(node:10946) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
빨간색 표시된 부분과 같은 메시지가 자꾸 출력되는데, "webpack-concat-plugin" 을 사용하고 있다면, 아직까지는 딱히 수정하기는 어렵다.
그러면, webpack.config.js를 한번 보자.
const ConcatPlugin = require('webpack-concat-plugin');
// ...
const webpackConfigs = {
plugins: [
new ConcatPlugin({
uglify: PRODUCTION,
sourceMap: !PRODUCTION,
name: 'test',
outputPath: 'dest',
fileName: '[name].js',
filesToConcat: [
path.join(__dirname, 'src', 'test01.js'),
path.join(__dirname, 'src', 'test02.js')
]
}),
new ConcatPlugin({
uglify: PRODUCTION,
sourceMap: !PRODUCTION,
name: 'test2',
outputPath: 'dest',
fileName: `[name]${PRODUCTION ? '.min' : ''}.js]`,
filesToConcat: [
path.join(__dirname, 'src2', 'test03.js'),
path.join(__dirname, 'src2', 'test04.js')
]
})
]
};
현재까지의 "webpack-concat-plugin"은 3.0.0 (06. 18. 2018)으로 수정이 안되고 있다. 그렇다고 소스 자체를 수정하자니, 이후 관리의 문제가 있고, 고민이 아닐 수 없다.
개인적으로 "webpack-merge-and-include-globally" 를 추천한다.
- 장점
- 여러 파일을 한번에 처리할 수 있다. 즉, 여러번 new Plugin()을 추가할 필요가 없다.
- ES6형태의 uglify를 할 수 있다.
- 단점
- 스스로 uglify를 해주지 않는다.
- 출력 위치를 직접 지정해야 한다.
그럼 이사가보자!
const MergeAndIncludePlugin = require('webpack-merge-and-include-globally');
// ...
const webpackConfigs = {
plugins: [
new MergeAndIncludePlugin({
files: [
{
src: [
path.join(__dirname, 'src', 'test01.js'),
path.join(__dirname, 'src', 'test02.js')
],
dest: PRODUCTION
? code => {
console.log(
'[webpack-merge-and-include-globally] Merging into',
`${colors.green(`[test${PRODUCTION ? '.min' : ''}.js]`)} ...`
);
// ES6를 지원하기 위해, UglifyJs대신 Terser를 사용한다.
const minifiedCode = Terser.minify(code.toString(), terserOptions);
const results = {};
results[path.join('libs', `test${PRODUCTION ? '.min' : ''}.js`)] = minifiedCode.code;
if (minifiedCode.map) {
results[path.join('libs', `test${PRODUCTION ? '.min' : ''}.js.map`)] =
minifiedCode.map;
}
console.log(
'[webpack-merge-and-include-globally] Minified to',
colors.green(`[test${PRODUCTION ? '.min' : ''}.js]`),
'done.'
);
return results;
}
: path.join('libs', 'test.js')
},
{
src: [
path.join(__dirname, 'src2', 'test03.js'),
path.join(__dirname, 'src2', 'test04.js')
],
dest: PRODUCTION
? code => {
console.log(
'[webpack-merge-and-include-globally] Merging into',
`${colors.green(`[test2${PRODUCTION ? '.min' : ''}.js]`)} ...`
);
const minifiedCode = uglifyJS.minify(code.toString(), {
sourceMap: {
filename: `ime${PRODUCTION ? '.min' : ''}.js`,
url: `ime${PRODUCTION ? '.min' : ''}.js.map`
}
});
const results = {};
results[path.join('libs', `test2${PRODUCTION ? '.min' : ''}.js`)] = minifiedCode.code;
if (minifiedCode.map) {
results[path.join('libs', `test2${PRODUCTION ? '.min' : ''}.js.map`)] =
minifiedCode.map;
}
console.log(
'[webpack-merge-and-include-globally] Minified to',
colors.green(`[test2${PRODUCTION ? '.min' : ''}.js]`),
'done.'
);
return results;
}
: path.join('libs', 'test2.js')
}
]
})
쓰고 나니 좀 길어보이는 문제가 있으나, 그건 꾸밈을 넣어서 그렇게 된 것이므로, 결과만 놓고 보자.
수정 후 표시되는 메시지
node run production
> xxx_xx_5.0.2@0.0.1 production /xxx_xx.5.0.2
> cross-env NODE_ENV=production webpack --colors --config webpack.config.js
clean-webpack-plugin: /xxx_xx.5.0.2/production has been removed.
...
보는 것처럼 "Deprecation Warning" 이 없어졌고, 결과도 잘 나온다. 단, 주의할 점은 출력 위치를 path로 만들어 줘야 한다는 점이다.
참고. webpack-merge-and-include-globally
댓글
댓글 쓰기