简单的webpack配置

let path = require("path");

const uglifyJsPlugin = require("uglifyjs-webpack-plugin");//压缩js

const miniCssExtractPlugin = require("mini-css-extract-plugin");//剥离css

const optimizeCssAssetsplugin = require("optimize-css-assets-webpack-plugin");//压缩css

const htmlWebpackPlugin = require('html-webpack-plugin') //生成index.html

module.exports = {

    entry:"./js/Tab.jsx",

    output:{

        path:path.join(__dirname,"./wpkfile"),

        filename:"demo.js"

    },

    module:{

        rules:[

            //css&less

            {

                test:/\.css$/,

                use:[

                    //打包压缩上线时

                    // miniCssExtractPlugin.loader,

                    // "css-loader",

                    // "less-loader"

                    //开发时

                    {

                        loader:"style-loader"

                    },

                    {

                        loader:"css-loader"

                    }

                ]

            },

            //less

            {

                test: /\.less$/,

                use: [

                    'style-loader',

                    'css-loader',

                    'less-loader'

                ]

            },

            //css中引入图片、文字图标

            {

                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,

                loader: 'url-loader?limit=50000&name=[path][name].[ext]'

            },

            //jsx

            {

                test:/\.jsx|\.js$/,

                use: [

                    {

                      loader: 'babel-loader',

                      options: { presets: ['env','react', 'stage-0'] }

                    }

                  ],

            }

        ]

    },

    // devtool:false, //打包压缩上线时

    devtool:"#cheap-module-eval-source-map",//开发时映射文件

    //剥离、压缩（打包压缩上线时）

    // plugins:[

    //    new miniCssExtractPlugin({

    //        filename:"Table.min.css"

    //    }),

    //    new htmlWebpackPlugin()

    // ],

    // optimization:{

    //    minimizer:[

    //        new optimizeCssAssetsplugin(),

    //        new uglifyJsPlugin()

    //    ]

    // },

    mode:"development",

    resolve:{

        extensions:[".css",".js",".jsx",".less"] //补全名称

    }

}