webpack4配置vue项目----8.配置devServer

这是一篇webpack4配置的系列文章，推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件，以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载，以及babel的使用
8.配置devServer服务器，热更新，前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

安装 webpack-dev-server

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

webapck.config.js添加如下设置

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

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

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --mode development"
  }
}

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

热更新

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

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添加如下配置

module.exports = {
    devServer: {
        proxy: {
            //哪些访问需要代理转发
            '/api': {
                target: 'http://47.110.129.207',//目标服务器
                changeOrigin: true, 
                secure: false,  
                credentials: 'include', 
                pathRewrite: {
                    '^/api': '' //重写路径，不需要重写则为‘’
                }
            }
        }
    }
}