webpack：多文件、多环境、跨域处理、热加载

最新推荐文章于 2022-05-29 20:54:33 发布

monkeyhlj

最新推荐文章于 2022-05-29 20:54:33 发布

阅读量101

点赞数

分类专栏： NodeJS学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/119112529

版权

NodeJS学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

webpack：多文件、多环境、跨域处理、热加载

多页面处理

多个入口
多个入口文件需要一个个指定
多个输出文件 [name].js
打包输出了多个js文件，需要把js文件添加到html 需要html-webpack-plugin
通过chunks指定不同的html页面引用不同的js文件

//package.json
{
  "name": "01",
  "version": "1.0.0",
  "description": "多文件",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "autoprefixer": "^9.8.4",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0"
  }
}

webpack.config.js文件：

let path = require("path")
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: { //配置入口
        home: './src/index.js',
        other: './src/other.js'
    },
    output: { //输出目录   输出多个文件home.js  other.js
        filename: "[name].js",  //动态输出多个文件
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板文件
            filename: 'home.html',        //生成的html文件
            chunks: ['home']              //html文件中引用的js
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'other.html',
            chunks: ['home', 'other']
        })
    ]
}

webpack多环境

开发 server：http://172.1.10.5:8081
测试 server：http://172.1.10.6:8082
上线 server：http://172.1.10.7:8081
通过命令简单切换环境打包

vuecli多环境配置

可见前面vuecli打包配置(.env .env.dev .env.prod)

配置不同的打包命令

开发打包 npm run build:dev
测试打包 npm run build:test
上线打包 npm run build:pro
在package.json配置命令, 需要指定配置文件 --config xxx.js
添加基类文件，用于保存公共的配置 webpack.base.js
添加子类文件，webpack.dev.js 、webpack.prod.js
相同的在父类不同的在子类

定义变量

webpack.DefinePlugin

{
  "name": "01",
  "version": "1.0.0",
  "description": "多环境",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build:dev": "webpack --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "autoprefixer": "^9.8.4",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0"
  }
}

webpack.base.js文件：

let path = require("path")
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: { //输出目录   输出多个文件home.js  other.js
        filename: "bundle.js",  //动态输出多个文件
        path: path.resolve(__dirname, "dist")
    },
    devServer: {  //web服务配置
        port: 8080,
        progress: true, //进度条
        contentBase: './dist',  //http容器的根目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板文件
            filename: 'index.html',        //生成的html文件
        })
    ]
}

webpack.dev.js文件：

//继承父配置文件
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let webpack = require("webpack")

module.exports = smart(base, {
    //子类的配置
    mode: "development",
    plugins: [
        new webpack.DefinePlugin({
            DEV_ENV: JSON.stringify('dev')  //定义变量
        })
    ]
})

webpack.prod.js文件：

//继承父配置文件
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let webpack = require("webpack")

module.exports = smart(base, {
    //子类的配置
    mode: "production",
    plugins: [
        new webpack.DefinePlugin({
            DEV_ENV: JSON.stringify('prod')  //定义变量
        })
    ]
})

跨域

url三部分不同就跨域 (协议域名端口)
http://www.baidu.com https://www.baidu.com
http://localhost:8080
js进阶—数据交互—后端cros,ng(已写)

通过node模拟接口

启动node server.js

//server.js
let express = require('express');
let app = express();

// 将前端和后端一起打包
let webpack = require('webpack')
let middle = require('webpack-dev-middleware')
let config = require("./webpack.config")
let compiler = webpack(config)
app.use(middle(compiler))

//pc
app.get('/api/user', (req, res)=>{
    res.json({name:"test1"})
})
//mobile
app.get('/mb/user', (req, res)=>{
    res.json({name:"mobile"})
})

app.listen(3000, ()=>{console.log("服务已启动，端口3000")})

通过webpack解决跨域

//package.json
{
  "name": "01",
  "version": "1.0.0",
  "description": "通过webpack解决跨域",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "autoprefixer": "^9.8.4",
    "babel-loader": "^8.1.0",
    "express": "^4.17.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0"
  }
}

通过proxy解决
前端：http://localhost:8080/user
后端：http://localhost:3000/user
1.先要用工具postman测试后端接口是否OK
2.前端如何代理到后端只需把uri部分替换掉
前端都有一个前缀有2种api /web /mobile
前端：http://localhost:8080/api/user
后端：http://localhost:3000/user
在代理过程中把api替换为空 pathRewrite
注意：打包后没有proxy配置了，即proxy只在开发时有效
打包后后端不处理跨域，可以nginx代理(在数据交互中已讲)，
还可以将前后一起打包
将前端和后端一起打包

let webpack = require('webpack')
let middle = require('webpack-dev-middleware')
let config = require("./webpack.config")
let compiler = webpack(config)
app.use(middle(compiler))

-启动 node server.js

vue history vuecli打包

启动前端服务

npm run dev

热加载

HOT MODULE REPLACEMENT [HMR]
默认刷新整个页面
HMR: 只会局部更新
当修改子文件时，不会刷新整个页面

webpack.config.js文件：

//自定义webpack
let path = require('path'); //path node
let HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');

module.exports = {  //node模块化的写法
    entry: "./src/index.js",  //入口
    mode: 'development',  //开发 发布production
    output: {                 //出口
        filename: "index.js", //指定输出名字
        //node __dirname 当前目录
        path: path.resolve(__dirname, "dist")  //指定输出目录
    },
    devServer: {  //web服务配置
        hot: true, //热加载
        port: 8080,
        // progress: true, //进度条
        contentBase: './dist',  //http容器的根目录
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                // pathRewrite: {'/api':''}
            },
            '/mb': {
                target: 'http://localhost:3000',
                // pathRewrite: {'/api':''}
            }
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板
            filename: 'index.html',       //打包后模板名字
        }),
        new webpack.HotModuleReplacementPlugin()  //热更新插件
    ]
}