1.處理js語法及校驗
@babel/core(核心包)
@babel/preset-env轉化高階語法)
@babel/plugin-proposal-decoreators(轉化es7語法)
@babel/plugin-proposal-class-properties(處理class的語法)
@babel/runtime(用在生產環境)
@babel/plugin-reansform-runtime(優化regeneratorRuntime轉化更高語法,不能處理inchudes('foo'),用@babel/polyfill【用於生產環境】)

2.全域性變數引入問題
方法一：不會暴露window
import $ from 'jquery'
方法二：全域性暴露(window)

import $ from 'expoes-loader?$?jquery'()
{
	test: require.resolve('jquery')
	use: 'expose-loader?$'
}

方法三： 在每個模組中注入$元素
new wepack.ProvedePlugin({
$: 'jquery'
})
引入不打包
externals: {
jquery: '$'
}
loader處理的指定目錄：outputPath: ''
loader處理的指定域名：publicPath: ''

3.css抽離優化
const MiniCssExtractPlugin = require('min-css-extract-plugin')

4.css,js,html壓縮優化

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
optimization: { // 優先項
	splitChunks:{ //分割程式碼塊
		cacheGroups: { //快取組
			common: { // 公共的模組
				chunks: 'initial', //從哪裡開始
				minSize: 0, // 檔案大於0
				minChunks: 2 //用了2次
			},
			vendor: { // 抽離第三方外掛
				priority: 1, // 優先權重
				test:/node_modules/,
				chunks: 'initial', //從哪裡開始
				minSize: 0, // 檔案大於0
				minChunks: 2 //用了2次
			}
		}
	},
	minimizer: {
		new TerserWebpackPlugin({ //js壓縮優化
			cache: true,
			parallel: true,
			sourceMap: true,
			terserOptionns: {
				compress: {
					drop_console: true,
					duop_debugger: true
				}
			}
		}),
		new OptimizeCssAssetsPlugin() //css壓縮優化
	}
}
plugins: [//陣列，放著所有的webpack外掛
	new MiniCssExtractPlugin({
		filename: '[name].css',
		chunkFilename: '[id].css'
	}),
    new HtmlWebpackPlugin(
        template:'./src/index.html',
        filename:'index.html',
        minify:{
            removeAttributeQutes:ture,//去除雙引號
            collapseWhitespace:true,//壓縮為一行
        },
        hash:true,在檔案後面會加上?adsa4d58wa9da45dsa的雜湊值
    )    
]

5.打包多頁應用

6.配置source-map
devtool:'source-map' //原始碼對映，會單獨生成一個sourcemap檔案 出錯了會標識是，提示報錯的行和列
devtool:'eval-source-map' //不會單獨生成一個sourcemap檔案，但是可以顯示行與列
devtool:'cheap-source-map' //會單獨生成一個sourcemap檔案，不會產生列，產生 後你可以保留下來
devtool:'cheap-module-eval-source-map' //不會單獨生成一個sourcemap檔案，整合在打包後的檔案中，不會產生列

7.watch監聽的用法

watch: true, //預設不開啟
watchOptions: { //監聽的選項
		poll：1000， // 每秒 問我1000次
		aggregateTimeout:  500, // 防抖 我停止輸入程式碼500毫秒後更新
		ignored: /node_modules/ // 不需要監聽的
}

8.webpack的小外掛y
clean-webapck-plugin: 打包前刪除舊的打包目錄
用法：new CleanWebpackPlugin('./dist')
copy-webpack-plugin: 複製打包物件
用法：new CopyWebpackPlugin([
[from: './doc', to: './']
])
BannerPlugin: // 版權著作
用法：new webpack.BannerPlugin('copyirght')

9.webpack跨域問題

devServer: {
	//代理：
	proxy: {
		'/api': {
			target: 'http://127.0.0.1:3333',
			pathRewrite: {
				'api': ''
			}
		}
	}
	//模擬資料
	before(app){
		app.get('/user',(req,res)=>{
			res.json({name:'123'})
		})
	}
}

有服務端，不用代理來處理

const express =require('express')
const app = express()
const wepack = require('webpack')

//中介軟體
const middle = require('webpack-dev-middleware')
const compiler = webpack(config)

app.use(middle(compiler))

const config =require('./webpack.config.js')

app.get('/user',(req,res)=>{
	res.json({name:'123'})
})
app.listen(3333)

10.resolve屬性的配置

resolve: {第三方
	modules:[
		path.resolve('node_modules'), //指定地方查詢
	],
	extensions:['.js','.css','.vue'], //優化查詢字尾名
	mainFields: ['style','main'], // 優先查詢目錄
	mainFiles: ['index.js'], // 優先查詢目錄
	alias: { //別名
		'vue': path.resolve(__dirname, './node_modules/vue/dist/vue.esm.js')
	}
}

11.第三方優化配置

noParse: /jquery/, //不解析jquery中的依賴庫
plugins: [
	new webpack.IgnorePlugin(/\.\/locale/, /moment/), // 引入moment包，但忽略locale資料夾
]

12.動態連線庫
建立一個單獨的webpack檔案

entry: {
	vue: ['vue'],
}
output: {
	filename: '_dll_[name].js',
	path: path.resolve(__dirname,'dist'),
	library: '_dll_[name]', // 命名
	libratyTarget: 'var' // 命名型別 commonjs|var|this
}
plugins: [
	new webpack.dllPlugin({
		name: '_dll_[name]',
		path: path.resolve(__dirname,'dist','manifest.json')
	})
]
然後template.html引入_dll_vue.js
在webpack.config.js加入
plugins: [
	new webpack.dllReferencePlugin(
		manifest: path.resolve(__dirname, 'dist', 'manifest.json')
	)
]

13.webpack多執行緒打包（happpack）

const Happypack = require('happypack')
module:{
	rules: [
		{
			test: /\.css$/,
			use: 'Happypack/loader?id=css'
		  }
	]
}
plugins: [
	new Happypack({
		id: 'css',
		use: ['style-loader','css-loader']
	})
]

14.懶載入,熱更新(@babel/plugin-syntax-dynamic-import)

懶載入：@babel/plugin-syntax-dynamic-import
熱更新：devServer:{hot: true}
new webpack.NamedModulesPlugin()
new webpack.HotdModuleReplacementPlugin()