Tetris Clone(2) – 여러가지 설정들

ESLint

module.exports = {
    "extends": "airbnb",
    "installedESLint": true,
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [2, { extensions: ['.js','.jsx'] }],
        "func-names": [0],
        "new-cap": [2, { newIsCap: true ,capIsNew: true, capIsNewExceptions: ['List', 'Map']}],
        "linebreak-style": [0]
    },
    "env": {
        "browser": true
    }
};

ESLint에 관한 설명은 ESLint 사용법(1) 과 ESLint 사용법(2) 를 참고하시길 바랍니다.

Webpack

var webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var version = require('./package.json').version;

var entry =  __dirname + '/src/index.js';

var output =  {
  filename: 'page/[name]/index.js',
  chunkFilename: 'chunk/[name].[chunkhash:5].chunk.js',
};

var devtool = 'source-map';

var eslint =  {
  configFile: __dirname + '/.eslintrc.js',
}

var loaders = [
    {
      test: /\.(json)$/,
      exclude: /node_modules/,
      loader: 'json',
    },
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel!eslint-loader',
    },
    {
      test: /\.(?:png|jpg|gif)$/,
      loader: 'url?limit=8192',
    },
    {
      test: /\.less/,
      loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[hash:base64:4]!postcss!less'),
    }
];

var devPlugins =  [
  new CopyWebpackPlugin([
    { from: './src/resource/music/music.mp3' },
    { from: './src/resource/css/loader.css' },
  ]),

  new webpack.HotModuleReplacementPlugin(),

  new webpack.NoErrorsPlugin(),

  new OpenBrowserPlugin({
    url: 'http://127.0.0.1:8080/'
  }),

  new ExtractTextPlugin('css.css', {
    allChunks: true
  }),
]

var productionPlugins = [

  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),

  new CopyWebpackPlugin([
    { from: './src/resource/music/music.mp3' },
    { from: './src/resource/css/loader.css' },
  ]),

  new HtmlWebpackPlugin({
    template: __dirname + '/server/index.tmpl.html'
  }),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }}
  ),

  new ExtractTextPlugin('css-' + version + '.css', {
    allChunks: true
  }),
];

var devServer = {
  contentBase: './server',
  colors: true,
  historyApiFallback: false,
  port: 8080, // defaults to "8080"
  hot: true, // Hot Module Replacement
  inline: true, // Livereload
  host: '0.0.0.0',
  disableHostCheck: true
};

module.exports = {
  entry: entry,
  devtool: devtool,
  output: output,
  loaders: loaders,
  devPlugins: devPlugins,
  productionPlugins: productionPlugins,
  devServer: devServer,
  postcss: function () {
    return [precss, autoprefixer];
  },
  version: version
};

(1) Webpack 설정파일의 개괄적인 설명은 Webpack4 설정 을 참고해 주시고, (2) 이 프로젝트에 사용된 다양한 플러그인들이 어떤 역할을 하는지는 이전글을 참고해주시기 바랍니다. 마지막으로 이 프로젝트에 적용된 Code Spliting 에 관련된 내용은 이글을 참고해 주시기 바랍니다.

다만, 위의 코드들은 4년전 코드고 현재는 안쓰는 라이브러리들이 많습니다. 다음에 이런 옛날 코드를 Webpack5에 맞게 다시 작성할 예정입니다.

Babel

{
  "presets": ["react", "es2015"]
}

react를 위한 플러그인들과 es2015문법을 사용할 수 있게 해주는 플러그인들을 쓴다는 의미다.