pwrwave's cabinet

Webpack "html-webpack-plugin" 사용팁 html-webpack-plugin 을 이용하여, 작업하다보니 2가지 사용 방법이 궁금해졌다. 1번. html-webpack-plugin loader를 교체할 수 없나? 방법) webpack.config.js const HtmlPlugin = require('html-webpack-plugin'); ... const webpackConfigs = { plugins: [ new HtmlPlugin({ // 원래 코드 // template: 'index.ejs', // 변경할 코드 template: `${path.resolve( __dirname, 'html-my-loader', 'index.js' )}?param1&param2=foo&param3=bar!index.ejs` }) ] }; html-my-loader/index.js const loaderUtils = require('loader-utils'); module.exports = function myLoader(source) { const options = loaderUtils.getOptions(this) || {}; ... return source.replace(options.from, options.to); }; 2번. block 제거 혹은 string replace 와 같은 것을 선행적으로 적용하고 나서 처리되게 할 수 없나? webpack.config.js const HtmlPlugin = require('html-webpack-plugin'); ... const webpackConfigs = { module: { rules: [ ...

Webpack v4 copy- webpack-plugin 할 때, Uglify하는 방법 Webpack v4로 바뀌면서, 이래저래 기존 Plugin이 보조를 맞춰 올라오지 못하는 경우가 많다. 그러다 보니, 원하지 않는 메시지를 보게 되는데, 결과를 얻는데는 문제가 없더라도, 아무래도 거슬릴 수밖에 없다. 표시되는 메시지 const webpackConfig = { plugins: [ new CopyPlugin( [ { from: path.resolve(__dirname, 'dest', `jquery${PRODUCTION ? '.min' : ''}.js`), to: 'libs', transform : PRODUCTION && content => Promise.resolve(Buffer.from(Terser.minify(content.toString(), terserOptions).code, 'utf8')) } ] ) ] }; ES6를 사용한다고 가정하고, Terser Plugin을 사용했지만, 상황에 따라 Uglify Plugin을 사용해도 된다.

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', ...