index.html用import引入文件会报错

需要webpack进行打包

<script src="../dist/static/js/main.js" ></script>

src是打包后的文件路径

处理样式loader

处理图片loader

webpack.docschina.org/guides/asse…

 {
        test: /\.(png|jpeg?g|gif|webp|svg)$/,
        type: 'asset', // 转base64
        parser: {
          dataUrlCondition: {
            // 小于10kb的图片转base64
            // 优点：减少请求数量 缺点：体积会更大
            maxSize: 10 * 1024,// 10kb
          }
        },
        generator: {
          // 输出图片的名字 hash文件名字 ext文件扩展名字
          // hash:10 取前十位
          filename: 'static/images/[hash:10][ext][query]'
        }
      },

修改输出文件目录

按照目录输出资源

  output: {
    path: path.resolve(__dirname, "dist"), // 绝对路径
    filename: 'static/js/main.js',
  }, 
  modules:{
    rules:[
     {
      test: /\.(png|jpeg?g|gif|webp|svg)$/,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          // 小于10kb的图片转base64
          // 优点：减少请求数量 缺点：体积会更大
          maxSize: 10 * 1024,// 10kb
        }
      },
      generator: {
        // 输出图片的名字 hash文件名字 ext文件扩展名字
        // hash:10 取前十位
        filename: 'static/images/[hash:10][ext][query]'
      }
      }
    ]
  }
   

自动清空上次打包目录

 output: {
    path: path.resolve(__dirname, "dist"), // 绝对路径
    // 入口文件输出的文件名字
    filename: 'static/js/main.js',
    // webpack5自动清空上次打包的内容。
    clean: true
  }, 

处理字体图标资源

1. 本地新建文件iconfont.css
2. iconfont.css 引入，在css中引入资源本地下载的字体文件 /font/jdLangzheng.ttf
3. 在main.js文件中引入字体css， import '../css/iconfont.css'

<span class="iconfont icon-anquanyinsi">&#x33;</span>
webpack.config.js module.rules[{}]
   {
        test: /\.(ttf|woff2?)$/,
        type: 'asset/resource', // 注意：不要将图标转成base64,会有问题
        generator: {
          filename: 'static/media/[hash:10][ext][query]'
        }
      }

处理其他资源

一些特殊的视频资源等

{
  test: /\.(ttf|woff2?|map3|map4|avi)$/,
  type: 'asset/resource', // 注意：不要将图标转成base64,会有问题
  generator: {
    filename: 'static/media/[hash:10][ext][query]'
  }
}

处理js资源

es6,只能编译js中es模块，不能编译其他语法，导致js不能在ie等浏览器运行。

1. 针对js兼容性处理，使用eslint来完成
2. 针对代码格式，使用babel做代码兼容性处理 先完成eslint,检查代码格式无误后，再由babel做代码兼容性处理

Eslint

用来检查js和jsx语法的检查工具 关键是写eslint配置文件，里面写上各种rules规则，将来运行eslint时就会以写的规则对代码进行检查

1. 配置文件 .eslintrc.* 新建文件，位于项目跟目录下 .eslintrc .eslintrc.js .eslintrc.json 区别在于配置格式不一样
2. 具体配置 以.eslintrc.js

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
}