webpack打包

╰半夏微凉° 2022-05-09 05:12 457阅读 0赞

进入工作空间,npm run build,打一下生产的包

打包完之后,会生成一个dist目录

70

static是静态文件的存放地址

在config目录下有一个index.js文件

  1. build: {
  2.   // Template for index.html
  3.   index: path.resolve(__dirname, '../dist/index.html'),
  5.   // Paths
  6.   assetsRoot: path.resolve(__dirname, '../dist'),
  7.   assetsSubDirectory: 'static',
  8.   assetsPublicPath: '/',

assetsPublicPath: ‘/‘,是打完包之后css和js等输出路径,如果配置上npm的路径,就可以在打包后也上传到云端.

给图片设置base64的编码.可以把图片转化为文本,省去加载的过程,减小浏览器的性能

  1. {
  2.   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  3.   loader: 'url-loader',
  4.   options: {
  5.     limit: 10000,
  6.     name: utils.assetsPath('img/[name].[hash:7].[ext]')
  7.   }
  8. },

如果图片大于10000才会使用base64编码,如果小于10000,则不会用base64编码,而是直接加载图片.

发表评论

表情：
评论列表 （有 0 条评论，457人围观）

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

相关阅读

    相关 Webpack打包

    1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sc

    爱被打了一巴掌爱被打了一巴掌/ 0 赞/ 414 阅读

    相关 webpack打包

    进入工作空间,npm run build,打一下生产的包 打包完之后,会生成一个dist目录   ![70][] static是静态文件的存放地址 在config目录

    ╰半夏微凉°╰半夏微凉°/ 0 赞/ 458 阅读