這是一篇webpack4配置的系列文章跪帝，推薦從頭開(kāi)始看起
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樣式前綴自動(dòng)補(bǔ)全
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', //主機(jī)地址，默認(rèn)是localhost
        port: '8080', //端口號(hào)黎泣，默認(rèn)8080
        open: true, //自動(dòng)打開(kāi)頁(yè)面
    },
};

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

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

執(zhí)行npm run dev恕刘，即可在開(kāi)發(fā)環(huán)境下運(yùn)行項(xiàng)目了

熱更新

綜合前面的內(nèi)容，對(duì)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文件方進(jìn)js目錄
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',//使用絕對(duì)路徑
    },
    devServer: {
        host: 'localhost', //主機(jī)地址抒倚，默認(rèn)是localhost
        port: '8080', //端口號(hào)褐着，默認(rèn)8080
        open: true, //自動(dòng)打開(kāi)頁(yè)面
        hot:true, //開(kāi)啟熱更新
    },
    module: {
        rules: [{ //vue 解析
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: { //開(kāi)發(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$/,
            //開(kāi)發(fā)環(huán)境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            //開(kāi)發(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]',//所有圖片放進(jìn)images目錄
}               
            }]
        }, ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'myWebpack',
            filename: 'index.html',
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "[name]-[hash].css",//所有抽離出的樣式文件，放進(jìn)css目錄
            chunkFilename: "vue-[name]-[hash].css"
        }),
        new VueLoaderPlugin(),
         new webpack.HotModuleReplacementPlugin()
    ],
};

前端跨域代理

前端通過(guò)代理處理跨域問(wèn)題托呕，只適用開(kāi)發(fā)環(huán)境含蓉。對(duì)于需要代理的接口频敛，我們將接口服務(wù)器替換成devServer，由devServer來(lái)幫助我們完成代理請(qǐng)求馅扣。所以在項(xiàng)目源代碼中斟赚，我們需要自行根據(jù)開(kāi)發(fā)環(huán)境以及接口是否需要代理，來(lái)判斷該接口請(qǐng)求的服務(wù)器地址是否需要換成devServer的地址差油。

webpack.config.js添加如下配置

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