webpack基础二1007

webpack基础二

1.plugin(插件)

1.1 基本概念

1.2 html-plugin使用

1.3 clean-plugin

1.4 copy-plugin使用

1.5 css-plugin使用

1.6 压缩css代码

2.webpack-watch使用

3.dev-server使用

3.1基本使用

3.2 dev-server解决跨域问题

基于以上的概念,我们来具体写一个小的解决跨域问题的例子

首先来配置一个简单服务器(根据前面nodejs所学)

const http = require("http");

http.createServer(function (req, res) {
    if(req.url.startsWith("/api/user") && req.method.toLowerCase() === "get"){
        res.writeHead(200, {
            "Content-Type": "text/plain; charset=utf-8"
        });
        res.end("知播渔666");
    }else if(req.url.startsWith("/api/login") && req.method.toLowerCase() === "get"){
        res.writeHead(200, {
            "Content-Type": "text/plain; charset=utf-8"
        });
        res.end("指趣学院666");
    }
}).listen(3000);

然后我们发送get请求

import $ from "jquery";

/*
当前发送请求的地址: http://127.0.0.1:9090/user
服务端的地址:      http://127.0.0.1:3000/api/user
所以我们就通过
*/
$.get("/user", function (result) {
    console.log(result);
});

$.get("/login", function (result) {
    console.log(result);
});

在webpack.config中的配置如下

proxy: [{
    context: ["/user", "/login"],
    target: "http://127.0.0.1:3000",
    changeOrigin: true,     // 域名跨域
    secure: false,          // https跨域
    pathRewrite:{"": "/api"} // 如上服务端已经将路径改成了/api/user，但是我们请求时任然能够成功
}]
/*
注意点:
devServer只能解决开发阶段的跨域问题, 并不能解决项目上线之后的跨域问题
原因非常简单, 因为项目上线之后是将打包好的文件上传到服务器, 而打包好的文件中并没有devServer
所以项目上线之后要想解决跨域问题还是需要依赖后端开发人员
*/

4.HMR-热更新插件

4.1 css的更新

4.2 js的更新

5. bable的使用

5.1 转换ES678语法到低级

5.2 babel-实现低版本语法

5.3 babel-实现低版本语法注意点

5.4 babel-使用技巧

6.打包html引用的图片

7. 图片压缩和合并

7.1图片压缩

7.2 图片合并

8.eslint代码检测

9.webpack配置文件优化