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

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

webpack 4로 넘어오면서 안되는 것들  (0) 2019.08.16
webpack version issue  (0) 2019.08.14
error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15

webpack V4 update하면

ts-loader도 update해줘야 한다.

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

webpack 4로 넘어오면서 안되는 것들  (0) 2019.08.16
webpack version issue  (0) 2019.08.14
error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15

tsconfig.json에


"skipLibCheck": true,


추가

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

webpack 4로 넘어오면서 안되는 것들  (0) 2019.08.16
webpack version issue  (0) 2019.08.14
error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15

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
      })
    ]
  }
};


'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

webpack version issue  (0) 2019.08.14
error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
webpack css-loader  (0) 2018.04.14

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

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


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

parser: babel-lint



'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
webpack css-loader  (0) 2018.04.14
react 설정  (0) 2018.04.14

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

  }

}

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
webpack css-loader  (0) 2018.04.14
react 설정  (0) 2018.04.14

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.

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
webpack css-loader  (0) 2018.04.14
react 설정  (0) 2018.04.14

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



'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
webpack css-loader  (0) 2018.04.14
react 설정  (0) 2018.04.14

+ Recent posts