Symfony encore

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