webpack4 通过cdn引入外部资源打包

左手的ㄟ右手 2021-07-24 12:19 687阅读 0赞

方式一:	
    	1、与mode同级配置,则不会打包jquery
    	  externals: {
    	    jquery:'jQuery',
    	    库名:'替代的全局变量字符串'
    	  }
    		例子:
    		
    		externals : { 
    		  lodash : { lodash这个外部library可以在AMD和CommonJ模块系统中通过lodash访问,但在全局变量形式下用_访问。
    		    commonjs: "lodash",
    		    amd: "lodash",
    		    root: "_" // 指向全局变量
    		  }
    		}
    		
    		externals : {
    		  subtract : {	subtract可以通过全局math对象下的属性subtract访问(例如 window['math']['subtract'])。
    		    root: ["math", "subtract"]
    		  }
    		}
    
    	2、在html文件中引入cdn链接即可
    	参考网址:https://www.webpackjs.com/configuration/externals/
    
    方式二:
    	使用html-webpack-externals-plugin插件,会自动引入srcript,src为entry字段对应的值
    	(1)下载
    		cnpm install -D html-webpack-externals-plugin
    	(2)配置
    		const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
    		
    		plugins: [
    		    new HtmlWebpackExternalsPlugin({
    		      externals: [
    		        {
    		          module: 'react',		库名
    		          entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js', cdn或本地文件
    		          global: 'React',	挂载到全局对象上的键名
    		        },
    		        {
    		          module: 'react-dom',
    		          entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
    		          global: 'React-dom',
    		        },
    		      ],
    		    }),
    	  	]
    	(3)在html文件中scripy引入cdn

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:

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');
    const WorkboxPlugin = require('workbox-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)/,
            use: [
              'thread-loader',  //开启多进程打包
              { 
                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(),
        new WorkboxPlugin.GenerateSW({  //生成serviceworker
           clientsClaim: true,  //帮助serviceworker快速启动
           skipWaiting: true, //删除旧的serviceworker
        })
      ],
      // 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'
      externals: { 
        jquery:'jQuery'
      }
    }
    
    /** */

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/a9ab68aac5f24d97aad548c9bb9f0e9d.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积

目录前端性能优化方案 -------------------- 1.在vue.config.js 里面的写入如下配置使用externals 代码在vue.con

落日映苍穹つ/ 2024年04月07日 15:28/ 0 赞/ 70 阅读

相关 webpack的资源打包(html中引入的资源和css中引入的资源)配置使用问题

最近在做一个webpack小项目的文件打包情况碰见的问题如下： 1、html中的img的src引入为\[‘object, module’\]的情况 2、对于cs

今天药忘吃喽~/ 2023年06月18日 05:52/ 0 赞/ 5 阅读

相关 MAVEN 引入外部包，并打包时引入外部JAR

最近做一个钉钉项目，引用官方的jar包，taobao-sdk-java-auto\_1479188381469-20190926.jar 需要项目引入外部包，而不是直接依赖引

ゝ一世哀愁。/ 2023年06月06日 12:20/ 0 赞/ 11 阅读

相关 webpack 打包图片资源

webpack 打包图片资源 / loader: 1. 下载 2. 使用（配置） plugins：1. 下载 2. 引入 3.使用

野性酷女/ 2023年01月09日 03:54/ 0 赞/ 192 阅读

相关 webpack 打包样式资源

webpack 打包样式资源 `webpack.config.js`配置文件内容为： // 用来拼接绝对路径的方法 const { re

￡神魔★判官ぃ/ 2023年01月09日 01:10/ 0 赞/ 185 阅读

相关 mybatis详解-(4)引入外部资源配置

本系列都使用maven构建，如果发现结构不一致，请变通创建相关文件和文件夹。直接将数据库的配置写死在xml文件中对以后的实施维护产生较大的挑战，所以将这些配置文件放在外部

雨点打透心脏的1/2处/ 2022年06月06日 01:10/ 0 赞/ 651 阅读

相关 SpringBoot引入外部Jar(打包)

第一步：Maven导入配置 <dependency> <groupId>ImApi</groupId> <artifactId>ImApi

雨点打透心脏的1/2处/ 2022年02月02日 04:47/ 0 赞/ 515 阅读

相关 webpack4 打包字体图标等其他资源

iconfont举例 1、下载图标代码到本地 (1)查看iconfont.css中需要的字体图标后缀名 (2)打开下载代码

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 20:15/ 0 赞/ 482 阅读

相关 webpack4 打包html资源

1、下载插件 cnpm i -D html-webpack-plugin 2、引入插件 const X = require('ht

绝地灬酷狼/ 2021年07月24日 13:43/ 0 赞/ 529 阅读

相关 webpack4 通过cdn引入外部资源打包

方式一: 1、与mode同级配置,则不会打包jquery externals: { jquery:'jQuery',

左手的ㄟ右手/ 2021年07月24日 12:19/ 0 赞/ 688 阅读