webpackのchunkで出力される外部ライブラリのライセンス表記を確認したところ、
pixi.jsなどの一部のライブラリのライセンス表記が出力されません。
uglifyjs-webpack-pluginやterser-webpack-pluginを使用してみたのですが、記述が正しくない為かうまくいきません。どのように対処したらよいのでしょうか。
json
1・tsconfig.json 2{ 3 "compilerOptions": { 4 "target": "es3", 5 "module": "CommonJS", 6 "lib": ["dom", "esnext"], 7 "baseUrl": "./src/ts", 8 "outDir": "./dist/js", 9 "sourceMap": false, 10 "allowJs": true, 11 "alwaysStrict": true, 12 "esModuleInterop": true, 13 "forceConsistentCasingInFileNames": true, 14 "isolatedModules": true, 15 "moduleResolution": "node", 16 "noEmit": false, 17 "noFallthroughCasesInSwitch": true, 18 "noUnusedLocals": false, 19 "noUnusedParameters": false, 20 "removeComments": true, 21 "skipLibCheck": true, 22 "strict": true, 23 "noImplicitAny": false, 24 "strictNullChecks": false 25 }, 26 "compileOnSave": true, 27 "include": [ 28 "src/ts/**/*.ts" 29 ], 30 "exclude": [ 31 "node_modules", 32 ], 33}
js
1・webpack.common.js 2const path = require("path"); 3const TerserPlugin = require('terser-webpack-plugin'); 4const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 5const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 6module.exports = { 7 entry: { 8 app: "./src/ts/index.ts" 9 }, 10 output: { 11 filename: "js/[name].js", 12 chunkFilename: "js/vendor.js", 13 path: path.join(__dirname, "dist") 14 }, 15 module: { 16 rules: [{ 17 test: /.ts$/, 18 use: "ts-loader", 19 exclude: /node_modules/ 20 } 21 ] 22 }, 23 optimization: { 24 minimize: true, 25 minimizer: [ 26 new UglifyJsPlugin({ 27 uglifyOptions: { 28 output: { 29 comments: /^!/, 30 } 31 } 32 }), 33 // new TerserPlugin({ 34 // extractComments: /^**!|@preserve|@license|@cc_on/i, 35 // }), 36 new OptimizeCssAssetsPlugin({}) 37 ], 38 splitChunks: { 39 cacheGroups: { 40 vendor: { 41 test: /node_modules/, 42 name: "vendor", 43 chunks: "initial", 44 enforce: true 45 } 46 } 47 } 48 }, 49 resolve: { 50 extensions: [".ts", ".js"] 51 } 52};
js
1・webpack.prod.js 2 3const merge = require('webpack-merge'); 4const common = require('./webpack.common.js'); 5module.exports = merge(common, { 6 mode: "production", 7 devtool: false, 8});
js
1・webpack.dev.js 2 3const merge = require('webpack-merge'); 4const common = require('./webpack.common.js'); 5const path = require("path"); 6module.exports = merge(common, { 7 mode: "development", 8 devServer: { 9 watchContentBase: true, 10 disableHostCheck: true, 11 contentBase: path.join(__dirname, "src"), 12 compress: true, 13 port: 8080, 14 open: true 15 }, 16 devtool: 'source-map', 17});
json
1・package.json 2{ 3 "name": "sample", 4 "version": "1.0.0", 5 "description": "", 6 "main": "index.js", 7 "scripts": { 8 "test": "echo \"Error: no test specified\" && exit 1", 9 "build": "webpack --config webpack.prod.js", 10 "dev": "webpack-dev-server --config webpack.dev.js" 11 }, 12 "author": "", 13 "license": "ISC", 14 "devDependencies": { 15 "@babel/core": "^7.6.2", 16 "@babel/preset-env": "^7.6.2", 17 "@types/gsap": "^1.20.2", 18 "@types/jest": "^25.1.3", 19 "@types/jquery": "^3.3.35", 20 "@types/pixi.js": "^4.8.7", 21 "babel-core": "^7.0.0-bridge.0", 22 "babel-jest": "^24.9.0", 23 "babel-loader": "^8.0.6", 24 "babel-preset-env": "^1.7.0", 25 "jest": "^24.9.0", 26 "jest-useragent-mock": "0.0.3", 27 "mini-css-extract-plugin": "^0.9.0", 28 "optimize-css-assets-webpack-plugin": "^5.0.3", 29 "terser-webpack-plugin": "^2.3.6", 30 "ts-jest": "^25.2.1", 31 "ts-loader": "^6.2.2", 32 "typescript": "^3.8.3", 33 "uglifyjs-webpack-plugin": "^2.2.0", 34 "webpack": "^4.42.1", 35 "webpack-cli": "^3.3.11", 36 "webpack-dev-server": "^3.10.3", 37 "webpack-merge": "^4.2.2" 38 }, 39 "dependencies": { 40 "gsap": "^3.2.0", 41 "jquery": "^3.5.0", 42 "pixi.js": "^4.8.7", 43 } 44}
当該ライブラリの側の「記述が正しくない」ということはないでしょうか?
ライブラリによって、/**や、/*!で始まるものだったりしているようです。
表記ゆれも考えて、ライブラリのコメント部分をすべて出力させるようにすればいいのではないかと考えているのですが、うまいこといきません。
あなたの回答
tips
プレビュー