Skip to content

Instantly share code, notes, and snippets.

@irrationnelle irrationnelle/package.json
Last active Aug 16, 2018

Embed
What would you like to do?
webpack 설정과 package.json 모듈 목록
{
"name": "babel-webpack4-exercise",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --config webpack.development.config.js"
},
"keywords": ["babel", "webpack4"],
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.26.0",
"ramda": "^0.25.0"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.46",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0-beta.46",
"@babel/preset-env": "^7.0.0-beta.46",
"@babel/preset-stage-0": "^7.0.0-beta.46",
"babel-loader": "^8.0.0-beta.2",
"webpack": "^4.8.2",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
}
}
const webpack = require('webpack');
const path = require('path');
const publicPath = '/';
module.exports = {
mode: 'development', // v4: 'production'로 설정하면 알아서 최적화를 해준다.
entry: {
vendor: ['babel-polyfill', 'ramda'], // 자주 사용하는 라이브러리는 따로 vendor로 빼놓는다.
app: ['./src/app.js'],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].bundle.js', // build마다 각각의 hash값을 부여
publicPath: publicPath,
// globalObject: 'global', // chunks 적용시 필요.
},
module: {
rules: [
{
test: /\.js?$/,
exclude: ['/node_modules'],
use: {
loader: 'babel-loader', // v8 버전 적용 중
options: {
presets: [
[
'@babel/preset-env', // @babel/preset-env은 babel-preset-env의 next 버전 같은 것
{
targets: { node: 'current' },
modules: false, // webpack의 tree-shaking 적용을 위한 옵션
},
],
[
'@babel/preset-stage-0', // @babel/preset-stage-0은 babel-preset-stage-0의 next 버전 같은 것
{
decoratorsLegacy: true, // 에러 방지용
},
],
],
plugins: [require('@babel/plugin-proposal-pipeline-operator')], // pipeline-operator 지원 플러그인
},
},
},
],
},
plugins: [new webpack.EnvironmentPlugin(['NODE_ENV'])],
optimization: {
minimize: true,
// ramda 덕에 용량이 너무 커져서(무려 600kb) 옵션으로 넣었는데 서버 사이드 렌더링 용인지 이걸 넣으면 terminal에 아무것도 안 찍힘
// splitChunks: {
// cacheGroups: {
// vendor: {
// chunks: 'initial',
// name: 'vendor',
// test: 'vendor',
// enforce: true,
// },
// },
// },
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.json', '.jsx', '.css'],
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.