Develop/Symfony

Symfony encore

GuriZzang 2017. 7. 24. 14:34

1. webpack.config.js 만들기

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
// directory where all compiled assets will be stored
.setOutputPath('web/build/')

// what's the public path to this directory (relative to your project's document root dir)
.setPublicPath('/build')

// empty the outputPath dir before each build
.cleanupOutputBeforeBuild()

// will output as web/build/app.js
.addEntry('app', './app/Resources/assets/js/main.js')

// will output as web/build/global.css
.addStyleEntry('global', './app/Resources/assets/css/global.scss')

// allow sass/scss files to be processed
.enableSassLoader()

// allow legacy applications to use $/jQuery as a global variable
.autoProvidejQuery()

.enableSourceMaps(!Encore.isProduction())

// create hashed filenames (e.g. app.abc123.css)
// .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

2. package.json 만들기

$ npm init

$ npm install

 

 

 

3. encore 설치

 

yarn 사용

 $ yarn add @symfony/webpack-encore --dev

 

npm 사용

 $ npm install @symfony/webpack-encore --save-dev

 

 

 

 

4. encore build

 

encore를 build를 하려고 하면

sass-loader & node-sass를 설치 하라는 경고 메세지가 나옴.

 $ yarn add sass-loader node-sass --dev

 

 $ npm install sass-loader node-sass --save-dev

 

 

# compile assets onces
$ ./node_modules/.bin/encore dev

# recompile assets automatically when files change
symfony server처럼 콘솔이 띄워져 있는 상태에서 컴파일 됨.
$ ./node_modules/.bin/encore dev --watch

$ ./node_modules/.bin/encore dev-server


# compile assets, but also minify & optimize them
$ ./node_modules/.bin/encore production

 


'Develop > Symfony' 카테고리의 다른 글

Symfony AppBundle 제거  (0) 2017.07.24
Symfony generate bundle  (0) 2017.07.24
Symfony 프로젝트 생성  (0) 2017.07.24
Symfony 설치  (0) 2017.07.24