webpack代理配置打包后接口404_webpack 从零开始

什么是webpack?

webpack 可以看做是是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack的优点

1. 自带模块化(commonjs规范)
2. 编译功能：可以将es6 代码转换为es5 ,将 jsx代码转换为es5 , typescript代码转换为javascript,less代码转换为css
3. gulp所做的事情，webpack都可以做到
4. 自带服务器，服务器基于Node（webpack-dev-server）

webpack初识

webpack共有4个版本分别是：1.x 、2.x 、3.x 、4.x版本 , 目前前端最流行的两大框架React和Vue中经常会用到webpack , 由此可见webpack使用的广泛程度

1.安装全局环境

npm install -g webpack webpack-cli

2.创建项目，初始化package.json文件

npm init

3.安装项目依赖的webpack

npm install --save-dev webpack webpack-cli

4.项目根目录创建两个文件夹src和dist

src : 存放源码文件
dist : 存放打包之后的文件

5.编写代码Hello Webpack

app.js:document.write("Hello Webpack");

6.在项目根目录增加配置文件webpack.config.js

const path = require('path');
        module.exports = {
            entry:"./src/app.js",
            output:{
                path: path.resolve(__dirname, 'dist'),
                filename:"bundle.js"
            }
        }

执行 :

webpack

7.编写模块化代码

app.js:

var hello = require("./hello.js");
document.getElementsByTagName("body")[0].appendChild(hello());

demo.js:

module.exports = function(){
    var divs = document.createElement("div");
    divs.textContent = "文本信息"; 
    return divs;
}

8.mode模式

mode: 'production' //生产模式
mode: 'development'//开发模式

9.快捷配置,在package.json文件中配置

"scripts": {
            "build":"webpack",
            "start":"webpack"
        }

改变运行方案

npm run build  //运行生产环境并打包
npm start      //运行开发环境

10.错误调试信息

生成错误信息文件 , 配置webpack.config.js文件 , 添加

devtool:提示方式

常用的提示方式有eval,source-map , hidden-source-map , inline-source-map , eval-source-map , cheap-source-map , cheap-module-source-map等

不同的错误提示方式的运行速度不同 , 适用场景也不同

11.webpack服务器

1.全局安装

npm install -g webpack-dev-server

2.项目依赖安装

npm install -D webpack-dev-server

3.运行webpack服务器

webpack-dev-server

4.快捷执行方案

"scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
}

5.修改服务器配置

配置文件中配置：

devServer:{
    contentBase: path.join(__dirname, "dist"),
    host: "0.0.0.0",
    port: 8081
}

命令行配置：

webpack-dev-server --progress

12.Loaders

1.ES6 转 ES5

1.安装：

npm install --save-dev babel-loader @babel/core @babel/preset-env

2.增加配置

{
    test:/.js$/,
    exclude:/node_modules/,
    loader:"babel-loader" 
}

3.增加一个配置文件.babelrc

{
    "presets": [
           "@babel/preset-env"
     ]
}

4.编码操作

app.js:

import * as Ele from "./demo"
document.getElementsByTagName("body")[0].appendChild(Ele.demo());

demo.js:

export function demo(){
     var divs = document.createElement("div");
     divs.textContent = "文本信息!!!"; 
     return divs;
}

5.参考地址：https://babeljs.io/setup#installation

2.React环境构建

1.安装：

npm install --save-dev @babel/preset-react
npm install --save react react-dom

2.修改.babelrc配置文件

{
      "presets": [
              "@babel/preset-env",
               "@babel/preset-react"
       ]
}

3.修改配置文件webpack.config.js

由于React的后缀名可以是js也可以是jsx

{
      test:/.(js|jsx)$/,
      exclude:/node_modules/,
      loader:"babel-loader" 
}

4.编写React代码了:( VSCode great Icons)

app.js:

import React from "react"
import ReactDOM from "react-dom"
class Hello extends React.Component{
      render(){
          return (
              <div>
                  Hello
              </div>
          )
      }
}
ReactDOM.render(<Hello />,document.getElementById("root"));

PS:如果要修改后缀名，记得修改：entry:"./src/app.jsx"

5.关于安装依赖
--save-dev(-D)：项目依赖，是不存在外部引用关系
--save(-S)：项目依赖，存在CDN

6.引入css文件

1.安装依赖：

npm install -D css-loader style-loader

2.增加配置webpack.config.js

{
      test:/.css$/,
       loader:"style-loader!css-loader"
}

3.运行:

npm start 

7.引入图片
1.安装依赖：

npm install -D url-loader

2.增加配置webpack.config.js

{
     test:/.(png|jpg|gif|jpeg|svg)$/,
     loader:"url-loader"
}

3.修改代码

import Logo from "./images/logo.jpg"
<img src={ Logo } alt="404" />

4.运行：

npm start

8.编译Less
1.安装：

npm install --save-dev less less-loader

2.添加配置文件

{
     test:/.less$/,
     loader:"style-loader!css-loader!less-loader"
}

13.插件:plugin

webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。这里简单介绍两个常用插件:

1.HTML模板插件
1.安装：

npm install -D html-webpack-plugin

2.增加配置:

new htmlPlugin({
      template:"./src/index.temp.html"
})

2.自动打开浏览器
1.安装：

npm install -D open-browser-webpack-plugin

2.增加配置：

new openBrowserPlugin({
     url:"http://localhost:8080"
})