webpack_3

桃扇骨 2021-11-11 00:26 237阅读 0赞

![1726006-20190723234345481-703495301.png][]

url-loader
    
    {
                    test: /\.(png|jpg|gif)$/,
                    // use: 'file-loader'
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 100 * 1024
                        }
                    }
                },
    
    使用base64加载图片

![1726006-20190723235308721-649577256.png][]

1 const path = require('path');
     2 const HtmlWebpackPlugin = require('html-webpack-plugin');
     3 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     4 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
     5 // const webpack = require('webpack');
     6 
     7 module.exports = {
     8     mode: 'development',
     9     entry: './src/index.js',
    10     output: {
    11         filename: 'bundle.[hash:8].js',
    12         path: path.resolve(__dirname, 'dist')
    13     },
    14     plugins: [
    15         new HtmlWebpackPlugin({
    16             template: './src/index.html',
    17             filename: 'index.html'
    18         }),
    19         new MiniCssExtractPlugin({
    20             filename: 'main.css'
    21         }),
    22         new OptimizeCssAssetsPlugin({
    23             cssProcessor: require('cssnano'), // 配置压缩选项
    24             cssProcessorPluginOptions: {
    25                 preset: ['default', { discardComments: { removeAll: true } }],
    26             },
    27             canPrint: true // 是否将插件的信息打印到控制台
    28         }),
    29        /* new webpack.ProvidePlugin({
    30             $: 'jquery'
    31         })*/
    32     ],
    33     module: {
    34         rules: [
    35             {
    36                 test: /\.html$/,
    37                 use: 'html-withimg-loader'
    38             },
    39             {
    40                 test: /\.(png|jpg|gif)$/,
    41                 // use: 'file-loader'
    42                 use: {
    43                     loader: 'url-loader',
    44                     options: {
    45                         limit: 100 * 1024
    46                     }
    47                 }
    48             },
    49             {
    50                 test: /\.css$/,
    51                 use: [
    52                     MiniCssExtractPlugin.loader,
    53                     'css-loader'
    54                 ]
    55             },
    56             {
    57                 test: /\.less$/,
    58                 use: [
    59                     {
    60                         loader: MiniCssExtractPlugin.loader,
    61                         options: {
    62                             insertAt: 'top'
    63                         },
    64                     },
    65                     'css-loader',
    66                     'less-loader'
    67                 ]
    68             },
    69             {
    70                 test: /\.js$/,//将es6的语法编译为低阶语法
    71                 use: [
    72                     {
    73                         loader: 'babel-loader',
    74                         options: {
    75                             presets: ['@babel/preset-env'],
    76                             plugins: ["@babel/plugin-proposal-class-properties"]
    77                         }
    78                     }
    79                 ]
    80             },
    81            /*
    82            {
    83                 test: require.resolve("jquery"),
    84                 use: 'expose-loader?$'
    85             }
    86             */
    87         ]
    88     }
    89 };

转载于:https://www.cnblogs.com/zhangzhengyang/p/11235282.html

[1726006-20190723234345481-703495301.png]: /images/20211109/5c830bb5c38c4d0c861a9ac2a31cfd60.png
[1726006-20190723235308721-649577256.png]: /images/20211109/d09cc73db4ec48ecb50d18bedf916b6a.png