webpack -2 코드 가공

webpack

자바스크립트 코드 가공

• babel-loader를 이용하여 가공

module : {
	rules : [
    	{
        	test: /\.js$\,
   	         use: {
    	        	loader: "babel-loader",
        	        options: {
                    		preset: [["@babel/preset-env", {targets: "defaults"}]],
                }
            },
        },
    ],
}, 

CSS 코드 처리

sass-loader : scss->css
css-loader : 폰트에 도움을 줌
style-loader: transformed css를 웹사이트에 적용

$ npm i sass-loader sass webpack --save-dev
$ npm i --save-dev css-loader
$ npm i --save-dev style-loader

{
	test: /\.scss$/,
 	user: ["style-loader", "css-loader", "sass-loader"],
    // 역순으로 작동됨.
}

webpack으로 가공된 java script와 css 분리하기

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");

module.exports = {
  entry: NEW_VERSION_PATH,
  mode: "development",
  plugins: [new MiniCssExtractPlugin({
  	filename: "css/styles.css",
    })],
  output: {
  	filename: "js/OLD_VERSION_FILENAME,
        path: path.resolve(__dirname, OLD_VERSION_PATH),
  }
  module: {
    rules: [
    {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { targets: "defaults" }]],
          },
        },
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
};

watch: true //프론트엔드 코드가 변경될때마다 webpack을 자동적으로 실행해줌
clear: true // webpack 실행 시 과거 파일 제거

특정 파일 nodemon 무시

$ touch nodemon.json

	{
    	"ignore" :[무시할 파일명],
        "exec": "babel-node index.js"
        // package.json 
        // "start" : "nodemon" 로 변경
    }