webpack4学习笔记（6）

编译es6

babel转化语法依赖：

         babel-loader:负责ES6语法转化

         babel-core:babel核心包

         babel-preset-env:告诉babel使用哪种转码规则进行文件处理

(1)安装依赖

npm install babel-loader @babel/core @babel/preset-env --save-dev

(2)配置config

    exclude表示不在指定目录查找文件

{

    test:/\.js$/,

    exclude:/node_modules/,

    use:'babel-loader'

}

(3)新建.babelrc文件配置转化规则

{

    "presets":["@babel/preset-env"]

}

另一种配置方式，不使用.babelrc文件

{

    test:/\.js$/,

    exclude:/node_modules/,

    use:{

        loader:'babel-loader',

        options:{

            presets:["@babel/preset-env"]

        }

    }

}

---

生成HTML

1.了解html-webpack-plugin

           根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径会按照正确的配置被添加进生成的html文件。

2.安装依赖

npm install html-webpack-plugin --save-dev

3.配置config文件

const HtmlWebpackPlugin=require('html-webpack-plugin');

plugins:[

    new HtmlWebpackPlugin({

        template:'./src/index.html', //模板文件路径

        filename:'webpck.html', //生成文件路径

        // minify:{

            // minimize:true, //是否打包为最小值

            // removeAttributeQuotes:true, //去除引号
    
            // removeComments:true, //去除注释

            // collapseWhitespace:true, //去除空格

            // minifyCSS:true, //压缩html内的样式

            // minifyJS:true, //压缩html内的js

            // removeEmptyElements:true, //清理内容为空的元素

        // },

        // hash:true //引入产出资源时加上哈希避免缓存

    })

]

---

处理HTML内嵌图片

在HTML中引入图片： html-withimg-loader

(1)安装

npm install html-withimg-loader --save

(2)配置config文件

Rules设置：

{

    test:/\.(html|htm)$/,

    use:['html-withimg-loader']

}