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' 카테고리의 다른 글

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

nodeJs 구조 관련 링크


https://blog.risingstack.com/node-hero-node-js-project-structure-tutorial/

'FrontEnd > nodeJS' 카테고리의 다른 글

nodeJs 구조  (0) 2018.04.18
npm --save --save-dev  (0) 2018.04.14

<Route render>

render React Element

<Route component>

render React Component

<Route children>

패스 매칭에 상관없이 무조건 표현


render는 인라인 렌더링이 가능하다는데 tslint에는 인라인 렌더링 하지 말라고 나온다.


'FrontEnd > react' 카테고리의 다른 글

component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

create-react-app typescript-react-tutorial --scripts-version=react-scripts-ts

'FrontEnd > react' 카테고리의 다른 글

component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

react에서 class를 쓰는 경우와 상태가 없는 함수를 쓰는 경우


https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

'FrontEnd > react' 카테고리의 다른 글

component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16
표현 컴포넌트와 컨테이너 컴포넌트  (0) 2018.04.15

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

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


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

parser: babel-lint



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

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' 카테고리의 다른 글

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

친절한 설명

http://ohyecloudy.com/ddiary/2016/09/04/til-npm-install-save-or-save-dev/

'FrontEnd > nodeJS' 카테고리의 다른 글

nodeJs 구조  (0) 2018.04.18
npm --save --save-dev  (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' 카테고리의 다른 글

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' 카테고리의 다른 글

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

티스토리 툴바