JSONP

前端是如何跨域拿到数据的

前端

<script>
    function callback(data) {
        // 对跨域数据的处理程序
    }
<script/>
<script src = "http://localhost:8001/index.js"><script/>

或者

<script>
    jsonp('url', (err, res) => {
        console.log('res', res)
    })
<script/>

服务器端

// http://localhost:8001/index.js
callback({
    data: {}
})

vue.config.js中proxy和反向代理有什么区别

反向代理

前端

在前端代码中，HTTP请求地址为反向代理服务器的地址和端口。设置axios或者其他HTTP客户端中请求的基本URL为反向代理服务器的地址。

配置nginx

listen: 8080;
location / {
    proxy_pass : http://localhost:8000;
}
location /api {
    proxy_pass : http://localhost:3000;
}

Webpack打包原理

模块化打包工具的由来

1. 目前存在的问题

   • 环境兼容问题。没有办法统一所有用户浏览器使用情况。
   • 模块文件过多，网络请求频繁。
   • 前端资源不仅仅只有js代码需要模块化

2. 希望达到的效果

   • 将散落的文件打包起来，解决频繁发起网络请求的问题。对于模块化划分，实际上只在开发环境中需要，帮助我们更好地组织代码。在运行环境中是没有必要的。
   • 将ES6语法通通编译成ES5语法
   • 需要支持不同种类的前端资源类型

loader

处理各种格式的文件，是文件转换过程

常用loader

1. 编译转换类：把加载到的资源模块转化成js代码，例如：css-loader->bundle.js中的js模块；或者是url-loader->bundle.js。
2. 文件操作类：把加载到的资源模块拷贝到输出目录，同时又将文件的输出路径进行导出，例如：file-loader；
3. 代码检查类：统一代码风格从而提高代码质量，一般不会修改生产环境中的代码，例如：ESLiint-loader

plugin

解决项目中除了资源加载其他自动化的工作。例如：

1. 自动在打包之前清除dist目录。
2. 拷贝不需要参与打包的静态文件到输出目录。
3. 压缩输出代码

常用plugin

1. clean-webpack-plugin：在每次构建之前，要先清空输出目录，避免构建产物的积累；当文件名发生变化或者是输出目录发生变化的时候，确保旧文件不会与新文件发生冲突
2. Copy-webpack-plugin：将静态文件，如图片、字体、配置文件以及html文件等复制到输出目录，以便在最终构建中使用。（相比之下，file-loader通常处理图片字体等静态资源）
3. html-webpack-plugin：根据指定的HTML文件模板进行注入生成最终的HTML文件.

plugins: [
    new CleanWebpackPlugin()，
    new HtmlWebpackPlugin(
        // 给构造函数设置属性
        // 修改生成的index.html的title和meta
        title: 'webpack plugin sample',
        meta:{
            viewport: 'width-device-width'
        }
    )
]