markdown Webpack配置文件

Posted 2021-05-05

![webpack logo](https://cdn-images-1.medium.com/max/1600/1*9IXiJMp60QAt3MP0R8qX_A.png)

# Webpack Config file 
    
    const webpack                         = require('webpack');
    const path                            = require('path');
    const MiniCssExtractPlugin            = require('mini-css-extract-plugin');
    const OptimizeCssAssetsWebpackPlugin  = require('optimize-css-assets-webpack-plugin');
    const TerserJSPlugin                  = require('terser-webpack-plugin');
    const PurifyCSSPlugin                 = require('purifycss-webpack');
    const glob                            = require('glob');
    const inProduction                    = (process.env.NODE_ENV === 'production');
    const CleanWebpackPlugin              = require('clean-webpack-plugin');
    const config                          = require('./webpack.config');


    module.exports = {

        /* Entry point */
        entry : {
            app : ['./src/js/main.js','./src/scss/style.scss'] ,
            vendors : ['jquery','popper.js','bootstrap']
        },  

        /* Output */
        output : {
            /* absolute path */
            path : path.resolve(__dirname, 'dist/js'),
            publicPath : '/js/',
            filename : '[name].js'
        },

        /* Modules */
        module : {
            rules : [
                /* css loader */
                {
                    test : /\.s[ac]ss$/,
                    exclude : /node_modules/,
                    use  : [
                        {
                            loader : MiniCssExtractPlugin.loader,
                        },
                        {
                            loader : 'css-loader' ,
                            options : { url : false } 
                        },
                        'sass-loader'
                    ]
                },

                /* file loader */
                {
                    test : /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                    use  : [
                        {
                            loader : 'file-loader',
                            options : {
                                name : '../images/[name].[ext]',
                                limit: 8000
                            },
                        },
                        'img-loader'
                    ]
                },

                /* js transpile Babel */
                {
                    test : /\.js$/,
                    exclude : /node_modules/,
                    loader : 'babel-loader'
                }
            ]
        },

        /* Plugins */
        plugins : [
            new PurifyCSSPlugin({
                // Give paths to parse for rules. These should be absolute!
                paths: glob.sync(path.join(__dirname, 'dist/*.html')),
            }),
            /* Minify css */
            new MiniCssExtractPlugin({
                filename: '../css/[name].css',
                chunkFilename: '../css/[id].css',
            }),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            }),
            /* Clean build folder */
            new CleanWebpackPlugin()
        ],

        /* Optimization */
        optimization : {
            minimizer : [new TerserJSPlugin({}) , new OptimizeCssAssetsWebpackPlugin({})]
        },

        /* DevServer */
        //The webpack-dev-server doesn't write to disk. It serves the result from memory.
        devServer : {
            publicPath : '/js/',
            contentBase : path.join(__dirname,'dist'),
            compress: true,
            port : 9000,
            open : true,
            writeToDisk: true,
            inline: true,
            watchContentBase: true
        },
    }