Webpack
-
PostCss + Autoprefixer 추가하기Webpack 2022. 4. 13. 15:23
postcss, postcss-loader, postcss-scss, autoprefixer 를 install 합니다. npm install postcss postcss-loader postcss-scss autoprefixer -D 프로젝트 루트 레벨에 postcss.config.js 파일을 생성해주세요. 아래와 같이 작성합니다. module.exports = { parser: 'postcss-scss', plugins: [require('autoprefixer')] }; parser: 'postcss-scss'는 scss 파일에서 사용하는 한줄 주석 등을 해석할 수 있게 해주기 위해 넣어줬습니다. // layout .section { width: 100%; background-color: #fff; ..
-
webpack 환경설정Webpack 2022. 3. 4. 11:23
npm init -y 로 package.json 생성해 줍니다. 생성된 package.json 에서 아래처럼 dependencies를 추가해주고, 터미널에서 npm i 를 입력하여 해당 패키지에 들어가게 된 dependencies를 설치해주세요. 혹은 첨부된 package.json을 다운 받으신 후 터미널에서 npm install 해주세요. 이제 webpack, babel, handlebars, jquery, 각종 plugin, 각종 loader 등을 install 해줬습니다. 프로젝트 root 레벨에 .babelrc 파일을 생성(babel사용)해주고, 하기와 같이 파일 내용을 작성 해줍니다. { "presets": [ "@babel/preset-env" ] } Babel은 무엇이길래 .babelrc 라..