webpack4 代码分割以及提取公共第三方库以及公共使用文件

迈不过友情╰ 2021-07-24 19:58 364阅读 0赞

方式一:
    	(1)修改entry
    		  键名任意取
    		  entry: {
    		    main: './src/js/index.js',
    		    test: './src/js/print.js',
    		    html:'./src/index.html'   为了启有webpack-dev-server热更新不失效时才添加
    		  },
    		  
       (2)修改output:
       	  output: {
    	    filename: 'src/js/[name].[hash:10].js',
    	    path:path.resolve(__dirname,'build')
    	  },
    	
       (3)若要将引入的第三方库单独拆分打包
       		1、与mode同级设置,参考网址https://webpack.js.org/plugins/split-chunks-plugin/
       			  optimization: {
    			    splitChunks: { 
    			      chunks:'all'  
    			    },
    			  	runtimeChunk:{ 将文件中引入的其他文件的hash值提取成一个文件格式如下,避免进行缓存时,因为文件的内改变使得hash值改变,导致引入该文件的文件内容也发生变化,进而导致重新打包
    			      name: entrypoint => `runtime~${entrypoint.name}`
    			    }
    			  },
    			  
    		通过设置组打包:
    			  optimization: {
    			    splitChunks: {
    			      cacheGroups: {
    			        xx: {
    			          test: /(react)|(react-dom)/,
    			          chunks: 'all',   chunks如果放在cacheGroups的外面会打包提取两次,放在里面只会提取一次
    			          name: '设置该组输出文件名称,不设置为该组对象的键名',
    			          
    			        },	
    			        yy:{	只要引用了两次及以上的文件都会单独打包
    			        	chunks:'all',
    			        	minChunks:2,
    			        }
    			      }
    			    }
    			  },
    			
    
    方式二:
    	将导入其他文件中内容的形式改写成es10的import语法,同时可以使用(3)中的方法提取依赖库
    	
    	import(/* webpackChunkName:'打包名称,默认为id值' */'文件路径').then({导出内容}=>{
    		成功导入
    	}).catch(()=>{
    		导入失败
    	])

代码示例:

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin= require('mini-css-extract-plugin');
    const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin');
    
    // process.env.NODE_ENV='development'
    // console.log(this.mode)
    module.exports = { 
      entry: ['./src/js/index.js','./src/index.html'],
      // entry: { 
      // main: './src/js/index.js',
      // test: './src/js/print.js',
      // // html:'./src/index.html'
      // },
      output: { 
        // 'src/js/build.[contenthash:10].js'
        filename: 'src/js/[name].[contenthash:10].js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              // 'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              MiniCssExtractPlugin.loader, //取代style-loader,提取js中的css为单独文件
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
              { 
                loader: 'postcss-loader',
                ident: 'postcss',
                options: { 
                  postcssOptions: { 
                    plugins: [['postcss-preset-env',{ }]]
                  },
                }
              }
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          },
          { 
            test: /\.(jpg|png|gif|jfif)$/,
            loader:'url-loader', //依赖于file-loader
            options: { 
              //图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
              limit: 8 * 1024,
              esModule: false,  //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
              name: '[name].[ext]',
              outputPath:'src/images'
            }
          },
          { 
            test: /\.html$/,
            loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
          },
          { 
            // exclude:/\.xx$/
            test: /\.(ttf|eot|svg|woff|woff2)$/,
            loader: 'file-loader',
            options: { 
              name: '[name].[ext]',
              outputPath:'src/icon'
            },
            
          },
          { //不检查node_modules
            // test: /\.js$/,
            // exclude:/node_modules/,
            // loader: 'eslint-loader',
            // enforce:'pre', //优先执行
            // options: { 
            // fix:true
            // }
          },
          { //js兼容性处理
            test: /\.js$/,
            exclude:/(node_modules|bower_components)/,
            loader: 'babel-loader',
            options: { 
              // 预设,指示babel做兼容性处理
              presets: [['@babel/preset-env', { 
                targets: { 
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge:'19'
                },
                useBuiltIns: 'usage', //按需加入
                corejs: {  //指定core-js版本
                  version:3
                }
              }]],
              cacheDirectory:true //开启缓存
              // plugins: ['@babel/transform-runtime']
            }
          }
        ]
      },
      //插件
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html', //将模板复制成指定文件
          minify: { 
            collapseWhitespace: true, //折叠空格
            removeComments:true  //移出注释
          }
          
        }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
        new MiniCssExtractPlugin({ 
          filename: 'src/css/build.[contenthash:10].css'
        }),
        new OptimizeCssAssetsPlugin(),
        new CleanWebpackPlugin(),
      ],
      optimization: { 
        splitChunks: {  
          chunks: 'all', //将node_modules内库单独打包
      
        }
      },
      mode: 'production',
      //自动化,自动编译、打开浏览器和自动刷新等
      devServer: { 
        // contentBase:['xx','xx',...]
        contentBase: path.resolve(__dirname, 'build'), //提供内容的目录
        //启动gzip压缩
        compress: true,
        port: 3000, //监听端口号
        open: true, //自动打开浏览器
        hot:true,
      },
      // devtool:'source-map'
    }
    
    /** */

js语法打包:

// import './index.less';
    // import '@babel/polyfill';
    import '../css/index.css';
    import '../css/index.less';
    import '../iconfont/iconfont.css';
    
    import $ from 'jquery';
    // import { print } from './print';
    
    import(/* webpackChunkName:'print' */'./print')
      .then((res) => { 
        //eslint-disable-next-line
        console.log(res);
       })
      .catch(() => { 
        //eslint-disable-next-line
       })
    
    
    console.log('wwff');

发表评论取消回复

表情：

评论列表（有 0 条评论，364人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack 深入浅出分析之打包公共代码、代码分割和懒加载

一、webpack 打包公共代码 1. 创建一个空文件夹，通过 `npm init` 初始化创建 `package.json` 文件，通过 `npm install w

小咪咪/ 2023年02月11日 12:28/ 0 赞/ 1 阅读

相关 webpack dll如何单独打包第三方库

1. 项目根目录创建webpack.dll.js文件 //webpack.dll.js const { resolve } = require('pat

野性酷女/ 2022年12月24日 13:58/ 0 赞/ 155 阅读

相关 vue项目webpack构建优化-提取公共依赖库dll

背景目前前端发展已经到了一个工程化比较成熟的阶段，前端的职责也越来越重，大多数的开发者选择使用webpack构建项目。当我们的项目越来越大，依赖包越来越多，那么构建速度

╰+攻爆jí腚メ/ 2022年11月21日 15:27/ 0 赞/ 279 阅读

相关 maven添加公共jar和第三方jar包，以及杂题

简介: 以前去面试的时候，经常会问，会使用maven么？以前总觉得maven是个很麻烦的东西，各种配置，看都看不懂；还不如直接下载jar 拷贝进去；为什么还要去配置ma

缺乏、安全感/ 2022年07月08日 15:28/ 0 赞/ 462 阅读

相关 webpack(v4.8.3)中静态资源输出以及使用第三方库的两种方法

一、webpack中静态资源输出所谓静态资源输出，说白了就是一些文件不需要经过webpack处理，直接输出到指定的地方（类似于粘贴复制）实现步骤： 1、npm i c

绝地灬酷狼/ 2022年05月24日 06:16/ 0 赞/ 89 阅读

相关 python：Pycharm安装第三方库easygui以及easygui入门

> 环境:ubuntu18.04 LTS 文章目录 PyCharm安装第三方库编写第一个GUI程序一个按钮

旧城等待，/ 2022年04月03日 06:00/ 0 赞/ 985 阅读

相关 SpringCloud提取公共配置

在开发微服务项目时，通常会有很多服务，此时会用配置中心来管理这些服务的配置，但有些服务可能会有相同的配置，比如数据源配置，eureka server注册中心地址配置，act

不念不忘少年蓝@/ 2022年03月21日 12:08/ 0 赞/ 305 阅读

相关 UE4中使用第三方库

[https://blog.csdn.net/lunweiwangxi3/article/details/83187840][https_blog.csdn.net_lunwe

Bertha 。/ 2021年12月15日 19:09/ 0 赞/ 342 阅读

相关 webpack4 代码分割以及提取公共第三方库以及公共使用文件

方式一: (1)修改entry 键名任意取 entry: { main: './src/js/index.

迈不过友情╰/ 2021年07月24日 19:58/ 0 赞/ 365 阅读

相关 webpack4 dll动态链接库打包第三方库

好处: (1)dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。

秒速五厘米/ 2021年07月24日 17:02/ 0 赞/ 456 阅读