HTML中img标签的图片资源处理

在基础篇中。我们提到了一个插件时候用来处理静态资源的copy-webpack-plugin
这里介绍另一个对图片类有效的loader
npm install -S html-withimg-loader
在webpack.config.js文件中添加loader

  1. {
  2.     test: /\.(htm|html)$/i,
  3.     loader: 'html-withimg-loader'
  4. }

使用时，只需要在html中正常引用图片即可，webpack会找到对应的资源进行打包，并修改html中的引用路径
当我们在html中使用相对路径的时候，会导致图片没有用。这个loader解决了这个问题。但是如果在使用这个的同时又用的copy的插件。那么对于图片的操作可能会出现错误。
所以对于图片类，我们在使用这个插件后，自需要正常的使用路劲就可以了，webpakc会进行自动的修改和打包。但是对于一些视频文件，我们可以使用copy的写法。这样就不会出问题

多页应用打包

就是有多个不同的html文件。每个html文件的js都不同。生成多个html和多个js
在webpack.config.js中修改入口和出口配置

  1.   // 1. 修改为多入口
  2.   entry: {
  3.       main: './src/main.js',
  4.       other: './src/other.js'
  5.   },
  6.   output: {
  7.     path: path.join(__dirname, './dist/'),
  8.     // filename: 'bundle.js',
  9.     // 2. 多入口无法对应一个固定的出口, 所以修改filename为[name]变量
  10.     filename: '[name].js',
  11.     publicPath: '/'
  12.   },
  13.   plugins: [
  14.       // 3. 如果用了html插件,需要手动配置多入口对应的html文件,将指定其对应的输出文件
  15.       new HtmlWebpackPlugin({
  16.           template: './index.html',
  17.           filename: 'index.html',
  18.           chunks: ['main'] // 里面需要依赖的js文件模块
  19.       }),
  20.       new HtmlWebpackPlugin({
  21.           template: './index.html',
  22.           filename: 'other.html',
  23.           // chunks: ['other', 'main']
  24.           chunks: ['other']
  25.       })
  26.   ]

第三方库的自动加载

可以通过expose-loader进行全局变量的注入，同时也可以使用内置插件webpack.ProvidePlugin对每个模块的闭包空间，注入一个变量，自动加载模块，而不必到处 import 或 require
安装expose-loader
npm i -D expose-loader

  1. module: {
  2.   rules: [{
  3.     test: require.resolve('jquery'),
  4.     use: {
  5.       loader: 'expose-loader',
  6.       options: '$'
  7.     }
  8.   }]
  9. }

require.resolve 用来获取模块的绝对路径。所以这里的loader只会作用于 jquery 模块。并且只在 bundle 中使用到它时，才进行处理。

也可以使用webpack内置的一个插件

  1. const webpack = require('webpack')

创建插件对象
要自动加载 jquery，我们可以将两个变量都指向对应的 node 模块

  1. new webpack.ProvidePlugin({
  2.   $: 'jquery', // 去找nodemodules下的jquery文件夹里的包，然赋值给变量$，下面同理
  3.   jQuery: 'jquery'
  4. })

Development / Production不同配置文件打包

项目开发时一般需要使用两套配置文件，用于开发阶段打包（不压缩代码，不优化代码，增加效率）和上线阶段打包（压缩代码，优化代码，打包后直接上线使用）
抽取三个配置文件：

  • webpack.base.js
  • webpack.prod.js
  • webpack.dev.js

image.png
步骤如下：

  1. 将开发环境和生产环境公用的配置放入base中，不同的配置各自放入prod或dev文件中（例如：mode）
  2. 然后在dev和prod中使用webpack-merge把自己的配置与base的配置进行合并后导出
    npm i -D webpack-merge

image.png

  1. 将package.json中的脚本参数进行修改，通过—config手动指定特定的配置文件

image.png

定义环境变量

除了区分不同的配置文件进行打包，还需要在开发时知道当前的环境是开发阶段或上线阶段，所以可以借助内置插件DefinePlugin来定义环境变量。最终可以实现开发阶段与上线阶段的api地址自动切换。(这里配合上面的配置不同环境下的打包文件使用非常好)
引入webpack const webpack = require(‘webpack’)
创建插件对象，并定义环境变量 在plugins里定义

  1. new webpack.DefinePlugin({
  2.   IS_DEV: 'false'  //  这里需要注意。会把引号内当成一个js表达式来执行如果需要字符串'"这会被解析为字符串"'
  3. })

Proxy解决跨域问题

在开发的时候。有时候需要我们后端解决跨域，这里简单的写一下Proxy解决跨域，注意这种只能在开发的时候生效，生产环境中是不生效的。这时候需要后端解决，再说了跨域就应该是让后端解决的。前端解决个屁

原理
image.png
此处介绍的使用devServer解决跨域，其实原理就是http proxy
将所有ajax请求发送给devServer服务器，再由devServer服务器做一次转发，发送给数据接口服务器
由于ajax请求是发送给devServer服务器的，所以不存在跨域，而devServer由于是用node平台发送的http请求，自然也不涉及到跨域问题，可以完美解决！
前端需要配置devServer的proxy功能，在webpack.dev.js中进行配置：

  1.  proxy: {
  2.       '/api': 'http://localhost:9999'
  3.     }
  5. //  这里也可以是键值对的形式，进行更加详细的配置，具体的可以百度，这里就不详述了

意为前端请求/api的url时，webpack-dev-server会将请求转发给http://localhost:9999/api处，此时如果请求地址为http://localhost:9999/api/getUserInfo，只需要直接写/api/getUserInfo即可，代码如下：

  1. axios.get('/api/getUserInfo').then(result => console.log(result))

还有一个HMR的使用。和热更新有关，但是好像用的不多，就不单独写一段了。有个概念就行。以后有需要在去百度看了。你说是不是呀！！！！！！！！！！！！！！！！！