webpack4配置vue项目—-8.配置devServer服务器，热更新，前端跨域代理


这是一篇webpack4配置的系列文章，推荐从头开始看起

安装 webpack-dev-server

1
npm install --save-dev webpack-dev-server

webapck.config.js添加如下设置

1
2
3
4
5
6
7
module.exports = {
    devServer: {
        host: 'localhost', //主机地址，默认是localhost
        port: '8080', //端口号，默认8080
        open: true, //自动打开页面
    },
};

package.json中添加开发环境启动指令

1
2
3
4
5
{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --mode development"
  }
}

执行npm run dev，即可在开发环境下运行项目了

热更新

综合前面的内容，对webpack.config.js做如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'js/[name]-[hash].js',//所有打包出的js文件方进js目录
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',//使用绝对路径
    },
    devServer: {
        host: 'localhost', //主机地址，默认是localhost
        port: '8080', //端口号，默认8080
        open: true, //自动打开页面
        hot:true, //开启热更新
    },
    module: {
        rules: [{ //vue 解析
            test: /.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: { //开发环境使用style-loader打包
                    css: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
                    scss: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader']
                }
            }
        }, { //js 解析
            test: /.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        }, {
            test: /.css$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
        }, {
            test: /.scss$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /.(png|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                     name: 'images/[name]-[hash].[ext]',//所有图片放进images目录
}              
            }]
        }, ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'myWebpack',
            filename: 'index.html',
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "[name]-[hash].css",//所有抽离出的样式文件，放进css目录
            chunkFilename: "vue-[name]-[hash].css"
        }),
        new VueLoaderPlugin(),
         new webpack.HotModuleReplacementPlugin()
    ],
};

前端跨域代理

前端通过代理处理跨域问题，只适用开发环境。对于需要代理的接口，我们将接口服务器替换成devServer，由devServer来帮助我们完成代理请求。所以在项目源代码中，我们需要自行根据开发环境以及接口是否需要代理，来判断该接口请求的服务器地址是否需要换成devServer的地址。

webpack.config.js添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
    devServer: {
        proxy: {
            //哪些访问需要代理转发
            '/api': {
                target: 'http://47.110.129.207',//目标服务器
                changeOrigin: true,
                secure: false,  
                credentials: 'include',
                pathRewrite: {
                    '^/api': '/webpackDevServerProxyTest' //重写路径
                }
            }
        }
    }
}