webpack 4.0图片在js文件css less 和html文件的引用配置

/*webpack 是node写出来的node的写法*/
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");//
let MiniCssExtractPlugin = require("mini-css-extract-plugin");//抽离生成css打包文件（可以引用多次）
let OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
let UglifyJsPlugin = require("uglifyjs-webpack-plugin");//优化js如压缩
let webpack = require("webpack");//webpack 处理jquery的引用
console.log(path.resolve('dist'));//输出绝对路劲
module.exports = {
    optimization: {//优化项
        minimizer: [
            new UglifyJsPlugin({
                cache: true,//缓冲
                parallel: true, //并发打包,一次打包多个
                sourceMap: true,//源码调试
            }),
            new OptimizeCSSAssetsPlugin()//优化css为压缩格式
        ]
    },
    devServer: {
        port: "3000",
        progress: true,//如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
        contentBase: path.join(__dirname, "public"),//此处最好是绝对路径
    },
    mode: "production",//模式 默认两种模式 production development
    entry: "./src/index.js",//入口
    output: {
        filename: 'bundle.[hash:8].js',//打包后的文件名,[hash:8]生成8位的哈希戳
        path: path.resolve(__dirname, "dist"),//以当前目录下产生一个dist文件,必须是绝对路径
        publicPath: "http://localhost:3000/",//配置一个根目录,这样配置的css和img图片等其它静态文件都会在dist下找这个可以配置到总的output下也可以单独在img下等下面配置
    },
    plugins: [//数组放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: "./src/index.html",//引入的路径
            filename: "index.html",//打包后的名字
            hash: true,//引用js加哈希戳
        }),
        new MiniCssExtractPlugin({
            filename: 'css/main.css'//将css文件打包到css文件夹下
        }),
        // new webpack.ProvidePlugin({//在每个模块中都注入jquery
        //     $: 'jquery'
        // }),
    ],
    externals: {
        jquery: '$'
    },
    module: {//模块
        rules: [
            {
                test: /\.html$/,
                use: 'html-withimg-loader'
            },
            // {
            //     test: require.resolve('jquery'),
            //     use: 'expose-loader?$'
            // },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        //用babel-loader 需要把es6-es5
                        //yarn add babel-loader @babel/core @babel/preset-env -D
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ["@babel/plugin-proposal-decorators", {"legacy": true}],//装饰器解析@log类的语法
                            ["@babel/plugin-proposal-class-properties", {"loose": true}],//类属性class解析为es5
                        ]
                    }
                }
            },
            //规则 css-loader 接续@import这种语法
            //style-loader 他是把css插入到header的标签中
            //loader默认是从右向左执行['style-loader', 'css-loader']其中一种引入方法
            //loader还可以写成对象方式
            {
                //可以处理less文件
                test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']//将生成的css打包到main.css中
            },
            {
                //可以处理less文件
                // node-sass sass-loader
                //stylus stylus-loader
                test: /\.less$/, use: [
                    MiniCssExtractPlugin.loader,//将生成的css打包到main.css中
                    'css-loader',
                    'postcss-loader',//在css前面加前缀(先处理postcss-loader在处理css-loader)
                    'less-loader'//把less ->css
                ]
            },
            {
                //处理图片
                test: /\.(jpg|png|gif)$/, use: {
                    // 'file-loader'//默认会在内部生成一张图片 到dist 目录下
                    //做一个限制 当我们的图片小于多少k的时候 用base64来转化
                    //否则用file-loader产生真实的图片
                    loader: 'url-loader',
                    options: {
                        limit: 1,//1字节的大小
                        outputPath: "img/",//打包后图片存储的位置
                    }
                }
            },
        ]
    }
}