webpack4（二）:es6、图片处理、多入口打包

处理es6（babel）

我们在index.js添加一个箭头函数：

let str = require('./a.js')
console.log(str)
require('./style.css')

let foo = ()=>{
    console.log('es6箭头函数')
}
foo();

如果不做任何额外配置，打包出来仍旧是es6语法，如何翻译成兼容性好的es5呢？这就需要借助于babel。
先来安装一下。

cnpm i babel-loader @babel/core @babel/preset-env -D

然后在webpack配置文件使用它：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css
let UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
    mode:'development',//模式设置为开发环境的话，不走优化项optimization
    //mode: 'production',//模式，默认两种 production和development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, // 去掉引号
                collapseWhitespace: true, // 去掉空格
            },
            hash: true //加hash防止引用文件缓存
        }),
        new MiniCssExtractPlugin({ // 抽离css插件
            filename: 'main.css',

        })

    ],
    module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            { // es6语法解析
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env' //babel-loader的解析库
                        ]
                    }
                },
                include:path.resolve(__dirname,'src'),
                exclude:/node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: 'style-loader', //loader可以传对象
                    //     options: {
                    //         insert: 'top' //将插入点调到最上面
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]

    },
    optimization:{ // 优化项，只在生产环境有效
        minimizer:[
            new UglifyJS({ //js压缩
                cache:true,
                sourceMap:true,
                parallel:true
            }),
            new OptimizeCss() // css压缩
        ]


    }
}

图片处理（file-loader、url-loader）

图片一般有三种引用途径：
1）js创建图片引入
2）css的background等引入
3）html的<img>标签引用
当这些文件被打包到目标目录时，我们希望图片也一起打包进来，这样可以保证路径不会错，这时需要file-loader帮我们来处理。

cnpm i file-loader -D

webpack配置文件：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css
let UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
    mode:'development',//模式设置为开发环境的话，不走优化项optimization
    //mode: 'production',//模式，默认两种 production和development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, // 去掉引号
                collapseWhitespace: true, // 去掉空格
            },
            hash: true //加hash防止引用文件缓存
        }),
        new MiniCssExtractPlugin({ // 抽离css插件
            filename: 'main.css',

        })

    ],
    module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            { //打包图片file-loader
                test:/\.(png|jpg|gif)/,
                use:'file-loader'
            },
            { // es6语法解析
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env' //babel-loader的解析库
                        ]
                    }
                },
                include:path.resolve(__dirname,'src'),
                exclude:/node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: 'style-loader', //loader可以传对象
                    //     options: {
                    //         insert: 'top' //将插入点调到最上面
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]

    },
    optimization:{ // 优化项，只在生产环境有效
        minimizer:[
            new UglifyJS({ //js压缩
                cache:true,
                sourceMap:true,
                parallel:true
            }),
            new OptimizeCss() // css压缩
        ]


    }
}

运行后，图片也一并被打包到build目录了。不过有些情况下，比如有些小图片我们减少请求数，直接使用base64的形式，这样就需借助url-loader了。

cnpm i url-loader -D

我们可以制定一个规则，比如小于多少k的时候就用url-loader转为base64，其他情况还是用file-loader进行图片输出。

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css
let UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {
    mode:'development',//模式设置为开发环境的话，不走优化项optimization
    //mode: 'production',//模式，默认两种 production和development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, // 去掉引号
                collapseWhitespace: true, // 去掉空格
            },
            hash: true //加hash防止引用文件缓存
        }),
        new MiniCssExtractPlugin({ // 抽离css插件
            filename: 'main.css',

        })

    ],
    module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            { //打包图片file-loader
                test:/\.(png|jpg|gif)/,
                use:{
                    loader:'url-loader',
                    options: {
                        limit:20*1024
                    }

                }
            },
            { // es6语法解析
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env' //babel-loader的解析库
                        ]
                    }
                },
                include:path.resolve(__dirname,'src'),
                exclude:/node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: 'style-loader', //loader可以传对象
                    //     options: {
                    //         insert: 'top' //将插入点调到最上面
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]

    },
    optimization:{ // 优化项，只在生产环境有效
        minimizer:[
            new UglifyJS({ //js压缩
                cache:true,
                sourceMap:true,
                parallel:true
            }),
            new OptimizeCss() // css压缩
        ]


    }
}

url-loader和file-loader之间有引用关系，这里只需声明url-loader即可，大于20k时会自动调用file-loader。

多入口打包

有时我们可能会根据项目的业务打包成多个入口，比如用户中心模块（home.html）、其他模块（other.html）。
以两个入口为例，我们首先需要定义两个入口和出口，这里就要注意出口不能定死文件名了，我们可以使用[name]的方式来动态输出文件名；然后就是打包html文件，我们知道需要使用html-webpack-plugin插件来处理，这里就需要配置两个html-webpack-plugin对象，分别对应不同的打包输出。

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
module.exports = {
    mode:'development',//模式设置为开发环境的话，不走优化项optimization
    //mode: 'production',//模式，默认两种 production和development
    entry: {
        home:'./src/home.js', //入口1
        other:'./src/other.js', //入口2
    },
    output: {
        filename: '[name].[hash:8].js', //
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html', //模板文件
            filename: 'home.html',
            chunks:['home'] //只引入home.js
        }),
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html', //模板文件
            filename: 'other.html',
            chunks:['other'] //只引入other.js
        }),
    ],
}