1.处理js语法及校验
1 2 3 4 5 6 | @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)
1 2 3 4 5 | import $ from 'expoes-loader?$?jquery' () { test: require.resolve( 'jquery' ) use: 'expose-loader?$' } |
方法三: 在每个模块中注入$元素
1 2 3 4 5 6 7 | new wepack.ProvedePlugin({ $: 'jquery' }) 引入不打包 externals: { jquery: '$' } |
loader处理的指定目录:outputPath: ''
loader处理的指定域名:publicPath: ''
3.css抽离优化
const MiniCssExtractPlugin = require('min-css-extract-plugin')
4.css,js,html压缩优化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 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监听的用法
1 2 3 4 5 6 | watch: true , //默认不开启 watchOptions: { //监听的选项 poll:1000, // 每秒 问我1000次 aggregateTimeout: 500, // 防抖 我停止输入代码500毫秒后更新 ignored: /node_modules/ // 不需要监听的 } |
8.webpack的小插件y
clean-webapck-plugin: 打包前删除旧的打包目录
用法:new CleanWebpackPlugin('./dist')
1 2 3 | npm install clean-webpack-plugin -D const CleanWebpackPlugin = require( 'clean-webpack-plugin' ) new CleanWebpackPlugin({ './dist' }) |
copy-webpack-plugin: 复制打包对象
用法:
1 2 3 4 5 | npm install copy-webpack-plugin -D const CopyWebpackPlugin = require( 'copy-webpack-plugin' ) new CopyWebpackPlugin([ {from: './doc' , to: './' } ]) |
BannerPlugin: // 版权著作
用法:new webpack.BannerPlugin('copyirght')
9.webpack跨域问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | devServer: { //代理: proxy: { '/api' : { target: 'http://127.0.0.1:3333' , pathRewrite: { 'api' : '' } } } //模拟数据 before(app){ app.get( '/user' ,(req,res)=>{ res.json({name: '123' }) }) } } |
有服务端,不用代理来处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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属性的配置
1 2 3 4 5 6 7 8 9 10 11 | 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.第三方优化配置
1 2 3 4 | noParse: /jquery/, //不解析jquery中的依赖库 plugins: [ new webpack.IgnorePlugin(/\.\/locale/, /moment/), // 引入moment包,但忽略locale文件夹 ] |
12.动态连接库
创建一个单独的webpack文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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()
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?