Puppy's paw

ts-loader@^2.3.7

은 webpack4에서 사용 할 수없다.

// ts-loader 2.3.7
function getLoaderOptions(loader) {
    // differentiate the TypeScript instance based on the webpack instance
    var webpackIndex = webpackInstances.indexOf(loader._compiler);
    if (webpackIndex === -1) {
        webpackIndex = webpackInstances.push(loader._compiler) - 1;
    }
    var loaderOptions = loaderUtils.getOptions(loader) || {};
    var configFileOptions = loader.options.ts || {};
    var instanceName = webpackIndex + '_' + (loaderOptions.instance || configFileOptions.instance || 'default');
    if (utils_1.hasOwnProperty(loaderOptionsCache, instanceName)) {
        return loaderOptionsCache[instanceName];
    }
    validateLoaderOptions(loaderOptions);
    var options = makeLoaderOptions(instanceName, configFileOptions, loaderOptions);
    loaderOptionsCache[instanceName] = options;
    return options;
}

loader 에서 getLoaderOptions(this)로 부르는데 options가 없어서 undefined에 접근하는 오류가 발생한다.
ts-loader version 4 이상을 써야 한다.

webpack4 이상에서 vue-loader 12.0.3 또한 안된다.
위와 마찬가지로 options가 없다.
vue-loader version 15 이상을 써야 한다.
참조: https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

webpack V4 update하면

ts-loader도 update해줘야 한다.

tsconfig.json에

추가

webpack4에서 uglifyjsPlugin이 따로 빠져나가서 쓰는 방법이 바꼈다

config 모듈에

optimization 프로퍼티를 설정하면 된다.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ]
  }
};

ES7은 class에서 static 변수 설정이 가능하다.

하지만 eslint는 ES6 기본이라 에러가 난다.

yaml을 사용하면 아래를 추가한다.

parser: babel-lint

jsx로 처리되는 변수들은 shadowing이 되서 eslint가 못찾아 낸다고 한다.

그래서 쓰고 있는데도 

is defined but never used같은 에러를 발생시킨다.

react도 직접 쓰지 않지만 jsx가 사용해서 필요한데 같은 에러가 나온다.

./eslintrc에

extends: ['eslint:recommended',  'plugin:react/recommended']

를 추가한다.

아니면 에러나는 줄 옆에 다음과 같은 주석을 단다.

// eslint-disable-line no-unused-vars

참고로 구체적으로 입맛에 맞는 설정도 가능하다.

{

  // I want to use babel-eslint for parsing!

  "parser": "babel-eslint",

  "env": {

    // I write for browser

    "browser": true,

    // in CommonJS

    "node": true

  },

  {

    "ecmaFeatures": {

      "jsx": true

    }

  },

  {

    "plugins": [

      "react"

    ]

  },

  // To give you an idea how to override rule options:

  "rules": {

    "quotes": [2, "single"],

    "eol-last": [0],

    "no-mixed-requires": [0],

    "no-underscore-dangle": [0],

    "react/display-name": 1,

    "react/jsx-boolean-value": 1,

    "react/jsx-no-undef": 1,

    "react/jsx-quotes": 1,

    "react/jsx-sort-prop-types": 1,

    "react/jsx-sort-props": 1,

    "react/jsx-uses-react": 1,

    "react/jsx-uses-vars": 1,

    "react/no-did-mount-set-state": 1,

    "react/no-did-update-set-state": 1,

    "react/no-multi-comp": 1,

    "react/no-unknown-property": 1,

    "react/prop-types": 1,

    "react/react-in-jsx-scope": 1,

    "react/require-extension": 1,

    "react/self-closing-comp": 1,

    "react/sort-comp": 1,

    "react/wrap-multilines": 1

  }

}

npm i -g style-loader css-loader postcss-loader

C:\Users\Sungwook\AppData\Roaming\npm

+-- css-loader@0.28.11

| +-- babel-code-frame@6.26.0

| | +-- chalk@1.1.3

| | | +-- ansi-styles@2.2.1

| | | +-- escape-string-regexp@1.0.5

| | | +-- has-ansi@2.0.0

| | | | `-- ansi-regex@2.1.1

| | | +-- strip-ansi@3.0.1

| | | `-- supports-color@2.0.0

| | +-- esutils@2.0.2

| | `-- js-tokens@3.0.2

| +-- css-selector-tokenizer@0.7.0

| | +-- cssesc@0.1.0

| | +-- fastparse@1.1.1

| | `-- regexpu-core@1.0.0

| |   +-- regenerate@1.3.3

| |   +-- regjsgen@0.2.0

| |   `-- regjsparser@0.1.5

| |     `-- jsesc@0.5.0

| +-- cssnano@3.10.0

| | +-- autoprefixer@6.7.7

| | | +-- browserslist@1.7.7

| | | | `-- electron-to-chromium@1.3.42

| | | +-- caniuse-db@1.0.30000828

| | | +-- normalize-range@0.1.2

| | | `-- num2fraction@1.2.2

| | +-- decamelize@1.2.0

| | +-- defined@1.0.0

| | +-- has@1.0.1

| | | `-- function-bind@1.1.1

| | +-- postcss-calc@5.3.1

| | | +-- postcss-message-helpers@2.0.0

| | | `-- reduce-css-calc@1.3.0

| | |   +-- balanced-match@0.4.2

| | |   +-- math-expression-evaluator@1.2.17

| | |   `-- reduce-function-call@1.0.2

| | +-- postcss-colormin@2.2.2

| | | `-- colormin@1.1.2

| | |   +-- color@0.11.4

| | |   | +-- clone@1.0.4

| | |   | +-- color-convert@1.9.1

| | |   | | `-- color-name@1.1.3

| | |   | `-- color-string@0.3.0

| | |   `-- css-color-names@0.0.4

| | +-- postcss-convert-values@2.6.1

| | +-- postcss-discard-comments@2.0.4

| | +-- postcss-discard-duplicates@2.1.0

| | +-- postcss-discard-empty@2.1.0

| | +-- postcss-discard-overridden@0.1.1

| | +-- postcss-discard-unused@2.2.3

| | | `-- uniqs@2.0.0

| | +-- postcss-filter-plugins@2.0.2

| | | `-- uniqid@4.1.1

| | |   `-- macaddress@0.2.8

| | +-- postcss-merge-idents@2.1.7

| | +-- postcss-merge-longhand@2.0.2

| | +-- postcss-merge-rules@2.1.2

| | | +-- caniuse-api@1.6.1

| | | | +-- lodash.memoize@4.1.2

| | | | `-- lodash.uniq@4.5.0

| | | +-- postcss-selector-parser@2.2.3

| | | | +-- flatten@1.0.2

| | | | +-- indexes-of@1.0.1

| | | | `-- uniq@1.0.1

| | | `-- vendors@1.0.1

| | +-- postcss-minify-font-values@1.0.5

| | +-- postcss-minify-gradients@1.0.5

| | +-- postcss-minify-params@1.2.2

| | | `-- alphanum-sort@1.0.2

| | +-- postcss-minify-selectors@2.1.1

| | +-- postcss-normalize-charset@1.1.1

| | +-- postcss-normalize-url@3.0.8

| | | +-- is-absolute-url@2.1.0

| | | `-- normalize-url@1.9.1

| | |   +-- prepend-http@1.0.4

| | |   +-- query-string@4.3.4

| | |   | `-- strict-uri-encode@1.1.0

| | |   `-- sort-keys@1.1.2

| | |     `-- is-plain-obj@1.1.0

| | +-- postcss-ordered-values@2.2.3

| | +-- postcss-reduce-idents@2.4.0

| | +-- postcss-reduce-initial@1.0.1

| | +-- postcss-reduce-transforms@1.0.4

| | +-- postcss-svgo@2.1.6

| | | +-- is-svg@2.1.0

| | | | `-- html-comment-regex@1.1.1

| | | `-- svgo@0.7.2

| | |   +-- coa@1.0.4

| | |   | `-- q@1.5.1

| | |   +-- colors@1.1.2

| | |   +-- csso@2.3.2

| | |   | `-- clap@1.2.3

| | |   +-- js-yaml@3.7.0

| | |   | +-- argparse@1.0.10

| | |   | | `-- sprintf-js@1.0.3

| | |   | `-- esprima@2.7.3

| | |   +-- mkdirp@0.5.1

| | |   | `-- minimist@0.0.8

| | |   +-- sax@1.2.4

| | |   `-- whet.extend@0.9.9

| | +-- postcss-unique-selectors@2.0.2

| | `-- postcss-zindex@2.2.0

| +-- icss-utils@2.1.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- loader-utils@1.1.0

| | +-- big.js@3.2.0

| | +-- emojis-list@2.1.0

| | `-- json5@0.5.1

| +-- lodash.camelcase@4.3.0

| +-- object-assign@4.1.1

| +-- postcss@5.2.18

| | +-- js-base64@2.4.3

| | +-- source-map@0.5.7

| | `-- supports-color@3.2.3

| |   `-- has-flag@1.0.0

| +-- postcss-modules-extract-imports@1.2.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-modules-local-by-default@1.2.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-modules-scope@1.1.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-modules-values@1.3.0

| | +-- icss-replace-symbols@1.1.0

| | `-- postcss@6.0.21

| |   +-- chalk@2.3.2

| |   | `-- ansi-styles@3.2.1

| |   +-- source-map@0.6.1

| |   `-- supports-color@5.3.0

| |     `-- has-flag@3.0.0

| +-- postcss-value-parser@3.3.0

| `-- source-list-map@2.0.0

+-- postcss-loader@2.1.3

| +-- loader-utils@1.1.0

| | +-- big.js@3.2.0

| | +-- emojis-list@2.1.0

| | `-- json5@0.5.1

| +-- postcss@6.0.21

| | +-- chalk@2.3.2

| | | +-- ansi-styles@3.2.1

| | | | `-- color-convert@1.9.1

| | | |   `-- color-name@1.1.3

| | | `-- escape-string-regexp@1.0.5

| | +-- source-map@0.6.1

| | `-- supports-color@5.3.0

| |   `-- has-flag@3.0.0

| +-- postcss-load-config@1.2.0

| | +-- cosmiconfig@2.2.2

| | | +-- is-directory@0.3.1

| | | +-- js-yaml@3.11.0

| | | | +-- argparse@1.0.10

| | | | | `-- sprintf-js@1.0.3

| | | | `-- esprima@4.0.0

| | | +-- minimist@1.2.0

| | | +-- os-homedir@1.0.2

| | | +-- parse-json@2.2.0

| | | | `-- error-ex@1.3.1

| | | |   `-- is-arrayish@0.2.1

| | | `-- require-from-string@1.2.1

| | +-- object-assign@4.1.1

| | +-- postcss-load-options@1.2.0

| | `-- postcss-load-plugins@2.3.0

| +-- schema-utils@0.4.5

| | +-- ajv@6.4.0

| | | +-- fast-deep-equal@1.1.0

| | | +-- fast-json-stable-stringify@2.0.0

| | | +-- json-schema-traverse@0.3.1

| | | `-- uri-js@3.0.2

| | |   `-- punycode@2.1.0

| | `-- ajv-keywords@3.1.0

| `-- UNMET PEER DEPENDENCY webpack@^2.0.0 || ^3.0.0 || ^4.0.0

`-- style-loader@0.20.3

  +-- loader-utils@1.1.0

  | +-- big.js@3.2.0

  | +-- emojis-list@2.1.0

  | `-- json5@0.5.1

  +-- schema-utils@0.4.5

  | +-- ajv@6.4.0

  | | +-- fast-deep-equal@1.1.0

  | | +-- fast-json-stable-stringify@2.0.0

  | | +-- json-schema-traverse@0.3.1

  | | `-- uri-js@3.0.2

  | |   `-- punycode@2.1.0

  | `-- ajv-keywords@3.1.0

  `-- UNMET PEER DEPENDENCY webpack@^2.0.0 || ^3.0.0 || ^4.0.0

npm WARN schema-utils@0.4.5 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none was installed.

npm WARN schema-utils@0.4.5 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none was installed.

npm install babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 --save-dev

npm WARN saveError ENOENT: no such file or directory, open 'D:\apache\htdocs\es6\package.json'

D:\apache\htdocs\es6

+-- babel-core@6.26.0

| +-- babel-generator@6.26.1

| | +-- detect-indent@4.0.0

| | | `-- repeating@2.0.1

| | |   `-- is-finite@1.0.2

| | |     `-- number-is-nan@1.0.1

| | +-- jsesc@1.3.0

| | +-- source-map@0.5.7

| | `-- trim-right@1.0.1

| +-- babel-helpers@6.24.1

| +-- babel-register@6.26.0

| | +-- home-or-tmp@2.0.0

| | | +-- os-homedir@1.0.2

| | | `-- os-tmpdir@1.0.2

| | `-- source-map-support@0.4.18

| |   `-- source-map@0.5.7

| +-- convert-source-map@1.5.1

| +-- json5@0.5.1

| +-- minimatch@3.0.4

| | `-- brace-expansion@1.1.11

| |   +-- balanced-match@1.0.0

| |   `-- concat-map@0.0.1

| +-- path-is-absolute@1.0.1

| +-- slash@1.0.0

| `-- source-map@0.5.7

+-- babel-loader@7.1.4

| +-- find-cache-dir@1.0.0

| | +-- commondir@1.0.1

| | +-- make-dir@1.2.0

| | | `-- pify@3.0.0

| | `-- pkg-dir@2.0.0

| |   `-- find-up@2.1.0

| |     `-- locate-path@2.0.0

| |       +-- p-locate@2.0.0

| |       | `-- p-limit@1.2.0

| |       |   `-- p-try@1.0.0

| |       `-- path-exists@3.0.0

| +-- loader-utils@1.1.0

| | +-- big.js@3.2.0

| | `-- emojis-list@2.1.0

| `-- mkdirp@0.5.1

|   `-- minimist@0.0.8

+-- babel-preset-env@1.6.1

| `-- babel-plugin-transform-es2015-unicode-regex@6.24.1

|   `-- regexpu-core@2.0.0

|     `-- regjsparser@0.1.5

|       `-- jsesc@0.5.0

+-- babel-preset-react@6.24.1

| +-- babel-plugin-syntax-jsx@6.18.0

| +-- babel-plugin-transform-react-display-name@6.25.0

| +-- babel-plugin-transform-react-jsx@6.24.1

| | `-- babel-helper-builder-react-jsx@6.26.0

| +-- babel-plugin-transform-react-jsx-self@6.22.0

| +-- babel-plugin-transform-react-jsx-source@6.22.0

| `-- babel-preset-flow@6.23.0

|   `-- babel-plugin-transform-flow-strip-types@6.22.0

|     `-- babel-plugin-syntax-flow@6.18.0

+-- babel-preset-stage-0@6.24.1

| +-- babel-plugin-transform-do-expressions@6.22.0

| | `-- babel-plugin-syntax-do-expressions@6.13.0

| +-- babel-plugin-transform-function-bind@6.22.0

| | `-- babel-plugin-syntax-function-bind@6.13.0

| `-- babel-preset-stage-1@6.24.1

|   +-- babel-plugin-transform-class-constructor-call@6.24.1

|   | `-- babel-plugin-syntax-class-constructor-call@6.18.0

|   +-- babel-plugin-transform-export-extensions@6.22.0

|   | `-- babel-plugin-syntax-export-extensions@6.13.0

|   `-- babel-preset-stage-2@6.24.1

|     +-- babel-plugin-syntax-dynamic-import@6.18.0

|     +-- babel-plugin-transform-class-properties@6.24.1

|     | `-- babel-plugin-syntax-class-properties@6.13.0

|     +-- babel-plugin-transform-decorators@6.24.1

|     | +-- babel-helper-explode-class@6.24.1

|     | | `-- babel-helper-bindify-decorators@6.24.1

|     | `-- babel-plugin-syntax-decorators@6.13.0

|     `-- babel-preset-stage-3@6.24.1

|       +-- babel-plugin-transform-async-generator-functions@6.24.1

|       | `-- babel-plugin-syntax-async-generators@6.13.0

|       `-- babel-plugin-transform-object-rest-spread@6.26.0

|         `-- babel-plugin-syntax-object-rest-spread@6.13.0

`-- UNMET PEER DEPENDENCY webpack@2 || 3 || 4