webPack 加载器

图片加载器

• file-loader —D (把图片解析成文件输出)
• url-loader —D (把比较小的图片解析成 Base64,提高页面加载速度，如果图片小于 100kb 作为 base64 输出，大于 100kb 会自动调用 file-loader 打包成文件输出)
• html-withimg-loader —D (识别 html 页面中引入的图片)

file-loader 和 url-loader 区别：

1. url-loader依赖file-loader
2. 当使用url-loader加载图片，图片大小小于上限值，则将图片转base64字符串，；否则使用file-loader加载图片，都是为了提高浏览器加载图片速度。
3. 使用url-loader加载图片比file-loader更优秀

JS 加载器

babel (JS 编译器，编译成所有浏览器都支持的代码 )

• babel-loader -D ( babel 和 webpack 的一个桥梁，解析 JS 代码)
• @babel/core -D （ babel 的核心模块）
• @babel/preset-env -D （主要是把 es6 转换成 es5的插件的集合）
• core-js@3 (安装在生产环境 相当于 babel-poliyfill 解析更高版本的 js)
• @babel/plugin-proposal-class-properties -D （处理类草案的语法）
• @babel/plugin-proposal-decorators -D (处理装饰器)
• @babel/plugin-transform-runtime(调用 @babel/runtime) @babel/runtime（减少冗余的代码）

/***
 *  需要配置 .babelrc 文件
 * 
 */
{   
    // 预设（插件的集合） 从上往下执行
    "presets": [
        ["@babel/preset-env",{
            "useBuiltIns": "usage", // entry usage  优化 不是转化所有的 api,而是用到那个就转化哪一个 
            "corejs": 3 // 转化 es6 中高版本的 api
        }]
    ], 
    // 一个一个的插件 从上往下执行
    "plugins": [
        "@babel/plugin-transform-runtime",   // 依赖于 @babel/runtime
        // 使用legacy: true模式时，@babel/plugin-proposal-class-properties必须在loose模式下使用以支持@babel/plugin-proposal-decorators。
        ["@babel/plugin-proposal-decorators", { "legacy": true }],  // "loose" : true 此值必须为 true 
        // loose boolean，默认为false。 何时true，将编译类属性以使用赋值表达式而不是Object.defineProperty。
        ["@babel/plugin-proposal-class-properties", { "loose" : true }] 
    ]  
}

webpack.config.js 配置文件

// 配置文件
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry: {
        index: './src/index.js',
    },
    // 出口
    output: {
        // filename: 'index.js',
        filename: '[name].js',
        path: path.resolve(__dirname,"dist")
    },
    // 加载机
    module: {
        rules: [
            // css 加载机
            {
                test:/\.css$/,
                // [] {} ''
                use: ['style-loader','css-loader']
            },
            // less 加载器
            {
                test:/\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // img 加载器
            // {
            //     test:/\.(jpg|jpeg|png|gif)$/,
            //     use: {
            //         loader: 'file-loader' ,
            //         options: {
            //             // 修改打包后的目录及文件名
            //             name:'img/[name].[ext]'
            //         }
            //     }
            // },
            {   // 图片小于 100kb 使用 url-loader ,
                test:/\.(jpg|jpeg|png|gif)$/,
                use: {
                    loader: 'url-loader' , // 如果图片小于 100kb 作为 base64 输出，大于 100kb 会自动调用 file-loader 打包成文件输出
                    options: {
                        limit: 100 * 1024 ,  //100kb 
                        outputPath: 'img',
                        // publicPath:'http://www.zhufeng.peixun/img'
                    }
                }
            },
             {
                test:/\.(eot|svg|ttf|woff|woff2)$/,
                use: {
                    loader: 'file-loader',
                }
            },
            // js 加载机
            {
                test: /\.js$/,
                use: 'babel-loader',
                include:path.resolve(__dirname,'src'), // 需要编译的 js 文件目录
                exclude:/node_modules/, // 排除需要编译的 js 文件目录
            },
        ]
    },
    // 服务器
    devServer: {
        port: 8080,
        compress: true, //是否压缩代码
        open:true,
        hot:true,
    // 插件
    plugins: [
        new CleanWebpackPlugin(), // 清空输出目录
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            hash: true,
        }),
    ],
}