webpack手动安装配置

安装

//4.0必须安装webpack-cli
npm install  webapck webapck-cli

自已常用配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const PATH = {
    app:path.join(__dirname,"src/main.js"),
    build:path.join(__dirname,"./dist")
}


module.exports = {
    mode:"development",
    entry:{
        app:PATH.app
    },
    output:{
        filename:"[name].js",
        path:PATH.build
    },
    module:{
        rules:[
            // {
            //     test:/\.(css|scss)$/,
            //     use:["style-loader",{
            //         loader:"css-loader",
            //         options:{
            //             modules:true
            //         }
            //     },"sass-loader"]
            // },
            {
                test:/\.(css|scss)$/,
                use:["style-loader",
                    "css-loader",
                "sass-loader"]
            },
            {
                test:/\.(js|jsx)$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env","@babel/react"]
                    }
                }
            },

            {
                test:/\.(jpg|png|gif)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        name:"[name][hash].[ext]",
                        limit:100,
                        outputPath:"./img"
                    }
                }
            },
            {
                test:/\.(eot|svg|ttf|woff|woff2)$/,
                use:{
                    loader:"file-loader",
                    options:{
                        name:"[name][path].[ext]",
                        outputPath:"./iconfont"
                    }
                }
            },

        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"index.html"
        })
    ],
    devServer:{
        proxy:{
            "/ajax":{
                target:"http://m.maoyan.com",
                changeOrigin:true
            },
            "/capi":{
                target:"https://mapi.eyee.com",
                changeOrigin:true
            },
            "/users":{
                target:"http://localhost:3000",
                changeOrigin:true
            }
        }
    },
    resolve:{
        alias:{
            "@":path.join(__dirname,"src"),
            "components":path.join(__dirname,"src/components")
        }
    }
}