Webpack-3【零配置、模块化规范、webpack-dev-server】

一.零配置模块化规范、webpack-dev-server

(1).file-loader

npm install file-loader --save-dev

const path = require('path');
module.exports = {
    entry:'./src/index.js',
    module:{
        rules:[
            {
                test: /\.(png|jpe?g|gif)$/,
                use:{
                    loader:'file-loader'
                }
            }
        ]
    },
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    }
}

index.js

import jspp from './jspp.jpg';
console.log(jspp);

日志打印

编码.jpg

还原图片文件名

module.exports = {
    entry:'./src/index.js',
    module:{
        rules:[
            {
                test:/\.(png|jpe?g)|gif/$/,
                use:{
                    loader:'file-loader',
                    options:{
                        name:'[name].[ext]'
                    }
                }
            }
        ]
    }
}

配置文件路径

module.exports = {
    entry:'./src/index.js',
    module:{
        rules:[
            {
                test:/\.(png|jpe?g|gif)/,
                use:{
                    loader:'file-loader',
                    options:{
                        name:'[name].[ext]',
                        outputPath:'imgs/'
                    }
                }
            }
        ]
    }
}

(2).url-loader

会返回一个base64

npm install url-loader --save-dev

const path = require('path');
module.exports = {
    entry:'./src/index.js',
    module:{
        rules:[
            {
                test:/\.(png|jpe?g|gif)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        name:'[name].[ext]',
                        outputPath:'imgs/'
                    }
                }
            }
        ]
    }
}

产出文件中没有图片文件

因为路径是base64的编码

(3).mode选项

默认为生产模式，所以为压缩代码

module.exports = {
    mode:'development'
}

(4).条件选择筛选

图片很大->base64字符串很大->bundle.js体积会很大->index.html加载bundle.js时间就很很长

图片很大->file-loader->单独生成 xxx.jpg文件 ->index.html引入xx.jpg文件->bundle.js体积就会很小->页面加载就会快

图片很小->file-loader->单独生成xxx.jpg文件->多发送一次HTTP请求

图片很小->url-loader->解析成base64字符串->设置img src属性->不需要发送额外的HTTP请求

limit选择多大文件采用base64

module:{
    rules:[
        {
            test:/\.(png|jpe?g|gif)$/,
            use:{
                loader:'url-loader',
                options:{
                    name:'[name].[ext]',
                    outputPath:'imgs/',
                    limit:10240
                }
            }
        }
    ]
}