webpack4

本地安装:

npm init -y

cnpm install webpack webpack-cli webpack-dev-server --save-dev

然后装一些所需要的loader和插件：

如：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/*
    __dirname:当前文件夹的绝对路径
    path.join() 将第一个参数和第二个参数进行链接
*/
const PATH = {
    main:path.join(__dirname,"./src/index.js"),
    build:path.join(__dirname,"./build")
}
//下面的代码都是 webpack的配置项
module.exports = {
    entry:{
        //这里面的key值决定了下面name的名字叫什么
        main:PATH.main
    },
    output:{
        filename:"[name].js",//app.js
        path:PATH.build
    },
    mode:"development",
    //做模块的处理 用loader进行处理
    module: {
        rules:[
            {
                test:/\.jsx?$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env","@babel/react"]
                    }
                }
            },
            {
                test:/\.(css)$/,
                use:[
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            //publicPath: "/"
                        }
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                            minimize: process.env.NODE_ENV == "production"
                        }
                    },
                    {
                        loader: "style-loader"
                    }
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 1024,
                        outputPath: "images/",
                        name: "[name].[ext]"
                    }
                }
            },
            {
                test: /\.(eot|ttf|woff2?)/i,
                use: {
                    loader: "url-loader",
                    options: {
                        outputPath: "fonts/",
                        name: "[name].[ext]"
                    }
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./index.html",
            hash: true
        }),
        new MiniCssExtractPlugin({
            filename: "css/[name].bundle.css",
            chunkFilename: "css/[name].chunk.css"
        })
    ],
    resolve: {
        extensions: [".js", ".jsx", ".json", ".css", ".html"]
    },
    devtool: "source-map",//该选项控制是否以及如何生成源映射。选择一种源映射样式，以增强调试过程。这些值可以显著地影响构建和重建速度。source-map之后你会发现你的 output 目录下多了一个 index.js.map 文件，此文件记录了sourceMap 行列信息如何映射源代码的信息

   devServer: {//访问本地静态文件
        compress: false,
        //contentBase: "./public",
        port: 8080,
        proxy: {
            "/": "http://localhost:3000"
        }
    }
}