본문 바로가기

SMALL

React.js/Webpack

(8)

Webpack(Devtool, Babel Loader, Resource Asset, bundle analyzer) 1. Webpack Devtool 빌드한 파일이 실제로 동작하니까, 내가 쓰는 파일하고 다르자나 그 때, 쓰는거라함. 소스 코드 간 매핑을 해줘서, 아 여기구나 하게 해주는거라는데 개발자 도구에서 source 탭에 소스 코드가 원래 코드랑 동일하게 나오게 해주던데 기능이나 성능은 각 각 다르다니까 쓰다가 배우도록 설정하는 방법: devtool: 'source-map', 이렇게 하면 source-map이라는 devtool 쓴다는 거 끝 webpack.config.js에 추가하면 됨 참조: https://webpack.js.org/configuration/devtool/#root Devtool | webpack webpack is a module bundler. Its main purpose is to bu..

Webpack development server(devServer), gzip 압축 react 쓸 때는 npm run dev 명령어로 서버 실행해서 브라우저에 내 코드가 잘 돌아가는지 본다. CRA로 만들면 다 설정되어 있는 건데, 어느 부분인지 보자 1. webpack.config.js 에 아래 설정 추가한다. devServer: { static: { directory: path.join(__dirname, 'dist'), }, compress: true, port: 3000, open: true, }, 2. package.json 에 script 추가한다. "dev": "webpack serve", 3. npm run dev 해주면 이렇게 나온다. Y 쳐서 깔아주도록하자 - serve 명령어 쓰려면 devDependencies로 webpack-dev-server 깔아야 된다는 말이다..

webpack caching 설정하기 output: { path: path.resolve(__dirname, 'dist'), // filename: 'main.js' filename: '[name].[contenthash].js', // 이렇게 파일이름 설정하면 내용 변경이 있을 때, 파일이름 다른걸로 생성해줌 clean: true, // npm run build 했을 때, 기존 파일들 없애줌, 안넣으면 파일 계속 생김 }, output 이렇게 작성해주면 됨 원래대로 하면 npm run bulid 했을 때, dist 폴더에 main.js 가 생김 다시 build 해도 main.js 임 내용 안바뀌어도 컴퓨터가 파일 계속 다시 만듦 근데 [name].[contenthash].js 이렇게 해놓으면 main.어쩌구저쩌구.js가 나옴 index.h..

Webpack plugins 설정하기(Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.) webpack plugins : HtmlWebpackPlugin() npm install -D html-webpack-plugin 해서 받는다. const HtmlWebpackPlugin = require("html-webpack-plugin"); webpack.config.js 에 추가해준다. plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/index.html' }) ] 이렇게 넣어주면 끝. src/index.html을 템플릿으로 해서 index.html을 알아서 잘 만들어 주렴 이라는뜻, 아무튼 그런거임 빌드해서 나오는 dist에 index.html은 신경쓰지 말고 src에 있는 index.html만 잘 쓰면 된다. ..

webpack loader(css, scss, sass import로 가져오기) npm i -D css-loader style-loader 기본 이거 2개 있어야 css 파일을 import로 가져올 수 있다. 여기서 import로 가져온다는 것은 javascript의 모듈로서 css파일을 사용하겠다는 것이다. 기존 원칙대로면 css파일을 인라인으로 쓰던가, 아무튼 html파일에 때려넣어줬어야했는데, javascript 파일에 css가져오는거다 npm i -D sass sass-loader 이것도 설치해줘야 sass를 쓰겠지 원래 webpack에 설정안하고 build해버리면 에러 뜨는데 아무튼 webpack.config.js에 module 부분에 rules 배열안에 추가해줬다. 이러면 npm run build 했을 때 제대로 됨, 적용도 되어서 padding 0되는 거 확인 modul..

Webpack 설정 파일 만들기(webpack.config.js) 웹팩 제대로 쓰려면 webpack.config.js 파일을 루트 디렉토리에 만들어줘야한다. 기본 설정은 아래와 같다. const path = require("path"); module.exports = { mode: 'development', // 시작점 // entry: path.resolve(__dirname, 'src/index.js'), // entry 1개 일 때 entry: { main: path.resolve(__dirname, 'src/index.js'), // entry 여러개 일 때 }, // 웹팩 작업을 통해 생성된 결과물 output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' } } [path는 이런거다] nodej..

Webpack 폴더 및 파일 구조 생성, import 구현하기 webpack은 크게 dist와 src 두 개의 디렉토리 구조를 갖는다고 한다. dist는 배포할 파일들 모이는 곳이고, (react에서 npm run build 하면 생기는 파일들의 공간, 아무튼 이 안에 데이터가 있어야 웹에서 보) src는 코드 작성하는 곳이다. Import 기능 구현 - 이것도 웹팩이 해주던 거다. 맨드러보자 1. randomAddress.js 파일을 만들었다. 아래 그림 보자 2. index.js에서 가져와서 콘솔창 확인해봤다. 원래 다른 파일에서 가져오고 하려면 index.html에서 script 태그에 module 속성 넣어주면 되는 걸로 알고 있다. 근데 webpack 쓸거니까 그런거 하지말자. 서비스 커지면 module 넣다가 인생 끝날지도 모른다. 3. webpack 설..

Webpack 알아보자 오픈 소스 자바스크립트 모듈 번들러 이다. 여러개의 파일들을 자바스크립트 코드로 압축, 최적화해주는 라이브러리이다. 장점 코드 압축을 해줘서 용량이 작아진다 => 네트워크 덜 사용한다 => 이득 모듈 단위 개발 가능하다 => 가독성 유지보수 쉬워진다 => 이득 create-react-app 으로 React 설치하면 웹팩 설정 알아서 해준다. 그래서 지금까지는 아주 편하게 함수 자동 import, 이미지, CSS 알아서 척척 다 됐다. CRA 안쓰고 Webpack 설정 배워보자 설정하는 부분은 몇 가지 부분으로 나뉘는데 Entry : 의존성 그래프 시작점, (대충 홈 페이지 여기라고 알려주는 거임, 웹팩한테) Output : 엔트리에 설정한 자바스크립트 파일을 시작으로 하나로 묶는다. 그 후 번들된 결과물..

이전 1 다음

LIST

티스토리툴바