webpack的后续 -- 隔离后的学习即2022第一次学习

webpack中的loader

less文件

使用less文件的操作方法和使用css文化的差不多，只是要安装不同的loader，安装不同的loader只需要在webpack官网里面找到相应的loader和配置

图片文件

可以使用url-loader这个loader来打包文件
但是这个在webpack.config.js文件中的配置有一个选项，就是下面那个，他表示图片最大不能超过这个字节数，如果大于limit的数值，在打包的时候就会报错

options: {
  limit: 8192,
},

url-loader的本质就是将图片转化为base64文件，然后将它呈现在页面上

如果大于这个数值，那么就要安装file-loader，使用file-loader会给图片重新命名一个32位的哈希值（为了避免命名重复）

其实就是小于base64字符串直接响应给浏览器，大于的话就用file-loader打包，打包后响应给浏览器

在使用file-loader的时候，要想让自己的页面里面可以使用打包好的图片文件，需要在webpack.config.js文件的output里面加上下面的代码注意一定不要拼写错误

publicPath:'dist/'

在使用file-loader的时候建议把url-loader直接注释掉，这样file-loader才可以正常运行

然后此时图片文件就会全部加载在dist文件下面，这时由于图片全部被换了名字，会让大家难以辨别到底是哪个图片，所以可以在config.js文件中在改一下，将下面的代码改在loader:'file-loader’下面

options: {
  name:'img/[name].[hash:8].[ext]'
}

img/表示在dist文件下面再创建一个名叫img的文件夹，[name]就是一个语法规范，表示将图片的原名字加上，每个中括号之间的点表示拼接hash:8表示取转换后哈希命名的前八位，ext表示扩展名。

个人建议不使用url-loader，加上这个loader反而会报错，没必要

es6语法处理

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
使用这个loader，主要目的是为了保证兼容，然后config.js文件里面还需要再配置一点东西

{
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,//排除这两个文件，这两个文件不需要转化
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

引入vue.js

用npm安装vue

关于VUE报错：
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

vue是开发两种版本的，分别是

1. runtime-only 代码中不可以有任何的template
2. runtime-compiler 有compiler可以编译template

在一般情况下，将id为app的挂载在div里面，那个div其实就是相当于那个vue的template。

至于如何解决这个问题，需要在webpack.config.js文件中exports加上下面的代码；

resolve:{
  alias:{//别名的意思
    'vue$':"vue/dist/vue.esm.js"//因为这个js文件里面有compiler，让我们可以解析template
  }     
}

SPA(simple page web application) 只有一个html文件，交互情况靠js，在进行交互的时候不会产生页面跳转的情况

如果是多个页面，使用路由(router[指前端路由])进行跳转

el 和 template的关系

在开发期间可能不希望div中的东西是直接写在html文件内部的，所以引入template属性，这个属性可以在加载的时候，将el挂载的元素全部替换成template里面的所有东西，所以template属性里面的内容要靠``反括号来书写

为了方便书写以及分离，我们加入app.vue这个文件
里面的template标签用来写模板
script标签用来写js代码
style标签可以直接改template里面的样式

想用webpack打包这个文件，需要vue-loader@15.4.2 和 vue-template-compiler@2.5.12 这两个loader

然后在webpack.config.js文件中配置

{
  test: /\.vue$/,
  use: ['vue-loader']
}

多个组件之间可以使用export Cpn from './Cpn.vue’来互相串起来

plugin

就是插件 对现有的框架进行一些扩展

loader就是一个转换器，而plugin是一个扩展器

加署名只需要在webpack.config.js文件里面

const webpack = require("webpack")
module.exports = {
  ...
  plugin: [
    new webpack.BannerPlugin("最终版权归属于xxx。")
  ]
}

如何让webpack打包在dist文件夹里面的时候包括我们的index.html文件？
npm install html-webpack-plugin@3.2.0 --save-dev
先下载，然后再改config里面的配置

const htmlWebpackPlugin = require("html-webpack-plugin");//第一步要先引入
plugin: [
  new webpack.BannerPlugin("最终版权归属于慕戈。"),
  new htmlWebpackPlugin({
    template: 'index.html'
  })
]

压缩js

uglifyjs-webpack-plugin和上面的使用方法差不多

由于我已经开始报错而且改不掉，准备完了有时间再重新配置一遍。

webpack-dev-server@2.9.3是帮助自己用于搭建本地服务器的

devServer:{
  contentBase: './dist',
  inline: true
}

具体效果和vscode里面live server的效果差不多

config.js文件可以创造多个，放在build文件夹里面
在想合并多个config文件的时候，需要下载webpack-merge
可以将生产时的环境和开发时的环境分开

感觉后续重新再学习得先看一遍文档再看视频，才能学到更多，现在真的就是皮毛，而且很多问题。
隔离后的学习生活让我得出结果，隔离不适合学习。