webpack_3

url-loader

{
                test: /\.(png|jpg|gif)$/,
                // use: 'file-loader'
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 100 * 1024
                    }
                }
            },

使用base64加载图片

 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 };