webpack总结四

心已赠人 2022-10-30 06:28 175阅读 0赞

--------------------

### 文章目录 ###

*   *  多页面处理
     *  跨域
     *  通过node模拟接口
     *  通过webpack解决跨域
     *  启动前端服务
     *  热加载
     *  webpack多环境
     *  vuecli多环境配置
     *  配置不同的打包命令
     *  定义变量

--------------------

## 多页面处理 ##

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

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']
            })
        ]
    }

## 跨域 ##

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

## 通过node模拟接口 ##

*  启动node server.js

## 通过webpack解决跨域 ##

*  通过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
    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()  //热更新插件
        ]
    }

## webpack多环境 ##

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

## vuecli多环境配置 ##

*  前面已讲(.env .env.dev)

## 配置不同的打包命令 ##

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

## 定义变量 ##

webpack.DefinePlugin

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文件
            })
        ]
    }
    
    
    //继承父配置文件
    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')  //定义变量
            })
        ]
    })
    
    //继承父配置文件
    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')  //定义变量
            })
        ]
    })