04-打包html、图片以及其他资源webpack.config.js

loader与plugin的使用差别
loader 下载，使用
plugin 下载，引入，使用

插件 html-webpack-plugin（默认创建一个空的html文件，自动引入打包输出的所有资源（js\css）） 安装，引入，实例化后，输入webpack，报错
Cannot find module 'util.promisify'
报错原因： Nodejs 8 有一个工具函数 util.promisify()
安装：npm i util-promisifyall -D
继续报错： Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
webpack、webpack-cli重新安装

image.png

这个html默认引入了输出的js

image.png

但是原html的body中代码没有带过来，我们需要有内容的html，在html-webpack-plugin的实例化时候传入配置
new HtmlWebpackPlugin({
template:'./src/index.html'
})
因为HtmlWebpackPlugin会自动引入打包后的js，css在html中，所以原html中不需要引入css 和js了

url背景图片：url-loader（基于file-loader）
img中的图片：html-withimg-loader（视频中的html-loader不对）

//webpack配置文件，配置如何进行打包
//5部分，entry，output，loader，plugins，mode
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports  = {
    entry:'./src/index.js',
    output:{
        filename:'out.js',
        path:resolve(__dirname,'build'),
        publicPath: './'
    },
    module:{
        rules:[
            {
               test:/\.css$/,
               use:[
                   'style-loader',
                   'css-loader'
               ]
            },
            {
               test:/\.scss$/,
               use:[
                   'style-loader',
                   'css-loader',
                   'sass-loader'//基于node-sass
               ]
            },
            {
                test:/\.less$/,
                use:[//use使用数组就是用多个loader处理
                    'style-loader',
                    'css-loader',
                    'less-loader'//基于less
                    
                ]
            },
            //webpack发现页面中多次引用同一张图片，只打包一次这张图片
            {//处理图片 处理样式中的图片用url-loader
                test:/\.(jpg|png|gif)$/,
                //url-loader是依赖file-loader的，需要下载两个包
                loader:'url-loader',//只用一个loader处理，可以不用use，直接用loader，loader上的配置在options选项中
                options:{
                    //当打包的图片小于8*1024时候，会转成base64位图片
                    //优点减少页面请求数量，减少服务器压力
                    //缺点体积增大，文件请求速度变慢
                    //输出的图片只会是>8kb的图片
                    limit: 8*1024,//我们通常会对8-12kb以下图片进行base64位处理
                    name:'[hash:10].[ext]',//不想让base64的图片名字太长，hash名字取10位+.+原来的后缀（ext）
                    esModule:false
                }
            },
            {//处理html中的img图片    
                test: /\.html$/,
                loader:'html-withimg-loader'    
            }
            ,
            {//处理其他资源，例如字体,除了html、js、css以外的资源
                //如果使用exclude，一定要排除的全面，否则各种报错
                exclude:/\.(html|css|js|scss|less|jpg|png|gif)$/,//exclude是排除  test是检测，都是正则
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            },
        ]
    },
    plugins:[
        //功能：默认会创建一个空的html，自动引入打包输出的所有js、css资源
        //需要有html，所有需要传入配置template，找对应的文件
        //原html模板页，不需要引入打包的js、css
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

引入html-webpack-plugin后报错

image.png

原因：可能是由于全局webpack 与 本地webpack版本不一致导致。
解决：
可以先执行 npm uninstall webpack -g
(先移除全局webpack架包)
再执行 npm install [email protected] -g
（@后边跟版本号，请在本地package.json中查看webpack版本）