webpackstudy/33/webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**
 * 
 */
module.exports = {
    entry: './src/index.js',
    output: {
        filename:'[name].js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ],
    mode: 'development',
    /**
     * 解析模块规则
     */
    resolve:{
        //配置解析路径别名 缺点：编辑器无提示
        alias:{
            $css: resolve(__dirname,'src/css')
        },
        //配置省略文件路径的后缀名
        extensions:[
            '.js','.json','.css'
        ],
        //告诉webpack解析模块位置
        modules:[
            resolve(__dirname,'../node_modules'),'node_modules'
        ]
    },
    devServer:{
        //运行代码目录
        contentBase: resolve(__dirname,'build'),
        //监视build目录下文件，一旦变化就会reload
        watchContentBase:true,
        //忽略监视
        watchOptions:{
            ignored: /node_modules/
        },
        //启动gzip压缩
        conpress: true,
        //端口
        port:3000,
        host:'localhost',
        //自动打开浏览器
        open:true,
        //开启HMR功能
        hot:true,
        //不显示启动服务器日志信息
        clientLogLevel:'none',
        // 除了一些基本启动信息，其他内容不显示
        quiet:true,
        // 出错时，不全屏提示
        overlay: false,
        // 服务器代理 -- 跨域问题
        proxy:{
            '/api':{
                target:'http://localhost:3000',
                //重写
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}