웹 팩 노트 - 설치 의존 정리 / url - loader / devtool 설정 / watch 감청 파일 변경 자동 포장 / resolve. extensions 와 resolve. alisa

웹 팩 노트 - 설치 의존 정리
설치 의존 정리

#      
npm init -y   
npm i webpack webpack-cli -D
#-D      ，     
npx webpack #           dist main.js，       
#          commonJS  
#           
npm i webpack-dev-server   html-webpack-plugin -D
#   css-loader style-loader   css  
npm i css-loader style-loader -D
#   less  less-loader   less  （   css  style             ）
npm i less less-loader -D 
#   node-sass sass-loader   sass  
npm i node-sass sass-loader -D 
#   mini-css-extract-plugin   css   css  link     
npm i mini-css-extract-plugin -D
#   postcss-loader autoprefixer   css        
npm i postcss-loader autoprefixer -D
#   optimize-css-assets-webpack-plugin      css  
npm i optimize-css-assets-webpack-plugin -D
#   babel-loader @babel/core @babel/preset-env    es6   
npm i babel-loader @babel/core @babel/preset-env -D
#   @babel/plugin-proposal-class-properties       
npm i @babel/plugin-proposal-class-properties -D
#   @babel/plugin-transform-runtime    js  
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime  #              
#   @babel/polyfill           (      includes  )
npm i @babel/polyfill  #   -D 
#   eslint eslint-loader    js  
npm i eslint eslint-loader -D
#   jquery          loader
npm i jquery -D
#   expose-loader      
npm i expose-loader -D
#   file-loader            build            
npm i file-loader -D
#   html-with-loader     img src=''      
npm i html-withimg-loader -D
#   url-loader       (    file-loader      )
npm i url-loader -D
#   hmr-filter-webpack-plugin       
#     new webpack.NamedModulesPlugin()            （    ）
npm i hmr-filter-webpack-plugin

npm 패키지 사용
url - loader 패키지

{
     
    test: /\.(png|hpg|gif)$/,
    use: {
     
        loader: 'url-loader',
        options:{
     
         	limit: 1000, //        kb   ， base64   ，   file-loader       
            outputPath: '/img/',
            publicPath: 'http://aixiaodou.cn'
        }
    }
}

devtool 설정

devWebpackConfig: {
     
    devtool: 'source-map'
}

source-map 소스 코드 맵 은 sourcemap 파일 을 따로 생 성 합 니 다. 오류 가 발생 하면 현재 잘못된 열 과 줄 을 표시 합 니 다

eval-source-map 단독 파일 은 만 들 지 않 지만 줄 과 열

을 표시 할 수 있 습 니 다.

cheap-module-source-map 열 이 생기 지 않 지만 단독 맵 파일 로 생 성 된 후에 보관 할 수 있 습 니 다

cheap-module-eval-source-map 파일 이 생기 지 않 고 포 장 된 파일 에 통합 되 어 열 이 생기 지 않 습 니 다

watch 감청 파일 변경 자동 포장

devWebpackConfig: {
     
    watch: true,
    watchOptions: {
      //      
        poll: 1000, //     1000 
		aggregateTimeout: 500, //           
        ignored: /node_modules/  //           
    }
}

resolve. extensions 와 resolve. alisa
기본 접미사 찾기 순서 수정 resolve.extensions파일 별명 수정 resolve.alisa

devWebpackConfig: {
     
    resolve: {
     
        extensions: ['.js', '.css', '.json'],
            alisa: {
     
                'vue$': 'vue/dist/vue.esm.js',
      			'@pages': path.join(__dirname, "..", "src", "pages"),
     			"@components": path.join(__dirname, "..", "src", "components")
            }
    }
}