這是一篇webpack4配置的系列文章，推薦從頭開始看起
1.初始化
2.關(guān)于執(zhí)行環(huán)境process.env.NODE_ENV
3.設(shè)置mode和sourceMap
4.加載css, scss文件，以及樣式抽離
5.加載圖片等文件
6.html-webpack-plugin插件
7.單vue文件的加載，以及babel的使用
8.配置devServer服務(wù)器，熱更新，前端跨域代理
9.設(shè)置目錄別名
10.css樣式前綴自動補全
11.public公共靜態(tài)資源目錄拷貝
12.清理dist目錄

安裝 webpack-dev-server

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

webapck.config.js添加如下設(shè)置

module.exports = {
    devServer: {
        host: 'localhost', //主機地址，默認是localhost
        port: '8080', //端口號，默認8080
        open: true, //自動打開頁面
    },
};

package.json中添加開發(fā)環(huán)境啟動指令

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

執(zhí)行npm run dev，即可在開發(fā)環(huán)境下運行項目了

熱更新

綜合前面的內(nèi)容，對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: { //開發(fā)環(huán)境使用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$/,
            //開發(fā)環(huán)境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            //開發(fā)環(huán)境使用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()
    ],
};

前端跨域代理

前端通過代理處理跨域問題，只適用開發(fā)環(huán)境。對于需要代理的接口，我們將接口服務(wù)器替換成devServer，由devServer來幫助我們完成代理請求。所以在項目源代碼中，我們需要自行根據(jù)開發(fā)環(huán)境以及接口是否需要代理，來判斷該接口請求的服務(wù)器地址是否需要換成devServer的地址。

webpack.config.js添加如下配置

module.exports = {
    devServer: {
        proxy: {
            //哪些訪問需要代理轉(zhuǎn)發(fā)
            '/api': {
                target: 'http://47.110.129.207',//目標服務(wù)器
                changeOrigin: true, 
                secure: false,  
                credentials: 'include', 
                pathRewrite: {
                    '^/api': '' //重寫路徑，不需要重寫則為‘’
                }
            }
        }
    }
}