webPack配置理解

webPack配置理解

官方文档

链接: https://www.webpackjs.com

webPack是什么

模块打包工具

搭配webPack环境

nodejs: https://www.nodejs.org

构建webPack项目

npm init

npm install webpack webpack-cli -g 全局安装

npm install webpack webpack-cli --save-dev(-D) 项目内安装

npx （npx webpack -v 查看当前项目webpack版本）可以操作当前项目

webPack配置

新建webpack.config.js
babel 帮助webpack将es6 转换成es5
babel: https://babeljs.io/setup#installation

启动本地服务器
1.npm install http-server --save
2.pageage.json 里面scripts 添加配置参数 ‘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')
		]
	}