웹 팩 설정 이해

웹 팩 설정 이해
공식 문서
링크:https://www.webpackjs.com
웹 팩 이 뭐 예요?
모듈 패키지 도구
웹 팩 환경 조합
nodejs: https://www.nodejs.org
웹 팩 프로젝트 구축
npm init
npm install webpack webpack - cli - g 전역 설치
npm install webpack webpack - cli -- save - dev (- D) 프로젝트 에 설치
npx (npx webpack - v 현재 프로젝트 웹 팩 버 전 보기) 현재 프로젝트 를 조작 할 수 있 습 니 다.
웹 팩 설정
새 웹 팩. config. js babel 은 웹 팩 이 es6 를 es5 babel 로 변환 하 는 데 도움 을 줍 니 다.https://babeljs.io/setup#installation
로 컬 서버 1. npm install http - server -- save 2. pageage. json 에서 스 크 립 트 에 설정 인자 'server' 추가: 'http - server dist'

const path = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')// css             1.npm install --save-dev mini-css-extract-plugin 2.    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')// css      1.npm install optimize-css-assets-webpack-plugin -D
const webpack = require('webpack') //   
const WorkboxPlugin = require('work-box-plugin') // PWA   ，                 

module.export = {
	mode: 'production', //      production           ，development      
	devtool: 'cheap-module-eval-source-map', //       js（main.js）      ，eval        source-map                      inline-source-map source-map       base64      js  （main.js）  cheap-inline-source-map         cheap-module-eval-source-map        module          cheap-module-source-map
	entry: 'xxx.js',  //       
	devServer: {
		open: true, //        
		port: 8080, //      
		proxy: {
			'/api': 'http://localhost:8080'
		}
	},
	module: { // loader  webpack   js  
		rulus: [{ 
			test: /\.js$/, 
			exclude: /node_modules/, //    node_modules          
			loader: "babel-loader" , //   webpack babel
			options: {
				presets: [["@babel/preset-env", {
					useBuiltIns: 'usage' //     babel-polyfill  babel-polyfill    
				}]] // '@babel/preset-env' es6   es5    https://babeljs.io/docs/en/babel-polyfill     es6    es5     
			}
		},
		{
		 	test: /\.(jpg|png|svg|eot)$/, 
		 	use: {
		 		loader: 'file-loader' //   webpack  .jpg .svg .eot .png  
		 	}
		},
		{
		 	test: /\.jpg$/, 
		 	use: {
		 		loader: 'url-loader' //   webpack  .jpg  
		 		options: {
		 			name: '[name].[ext]'， // name        ext    
		 			outputPath: '/images', //     dist    images           
		 			limit: 20480 //         20480       images       20480 file—loader     dist    js  
		 		}
		 	}
		},{
		 	test: /\.css$/, 
		 	use: [
		 		MiniCssExtractPlugin.loader, // css     
		 		// 'style-loader', 
		 		// 'css-loader', 
		 		{
		 			loader: 'css-loader',
		 			options: {
		 				importLoaders: 2 //   saas       saas                     postcss-loader saas-loader       
		 				modules: true //   css     
		 				//   
		 				//	import css from './xxx.css'
		 				//	div.addClass(css.box)
		 				//	css   xxx.css
		 				//	box css  
					}
				}
				'saas-loader'
		 		'postcss-loader'
		 	] //     postcss-loader saas-loader css-loader    style-loader             
		}]
	},
	optimization: { // css        
		minimizer: [
			new OptimizeCssAssetsWebpackPlugin({})
		]
	},
	// plugin    weboack              
	plugins: [new HtmlWebpackPlugin({ //       html  （index.html）       js       html
		template: '../xxx.html'  //   html  
	}), new CleanWebpackPlugin({ //        dist        
		['dist']
	}),new MiniCssExtractPlugin({ // css    
		filename: '[name].csss',
		chunkFilename: '[name].chunk.css'
	}),new webpack.ProvidePlugin({
		$: 'jquery' //          $，           jquery    
	}), new WorkboxPlugin.GenerateSW({ // PWA
		// index.js
		// if ('serviceWorker' in navigator) {
		//	window.addEventListener('load', () => {
		//		navigator.serviceWorker.register('/server-worker.js')
		//		.then(registration => {
		//			console.log('    ')
		//		})
		//		.catch(error => {
		//			console.log(erroe)
		//		})
		//	})
		//}
		clientsClaim: true,
		skipWaiting: true
	})], 
	optimization: { 
		usedExports: true,//          js css      package.json  	sideEffects: ['*.css'] => MiniCssExtractPlugin           development   production          import           js
		splitChunks: { //            ，   lodash  npm install lodash -D
			chunks: 'all'，
			minSize: 30000,
			minChunks: 1, //            
		}
	},
	output: { //        
	   publicPath: 'www.xxx.com', //             cdn 
	   filename: '[name].js' //      
	   path： path.resolve(__dirname, '     ') //          __dirname   webpack.config.js       
	}
}

css 기본 접두사
npm install autoprefixer - D 새 postcss. config. js

	module.exports = {
		plugins: [
			require('autoprefixer')
		]
	}