webpack4基本使用（三）-第三方模块-source-map

webpack引入第三方模块

1. expose-loader 暴漏到window上
2. 使用插件
   plugins: [
   new webpack.ProvidePlugin({//全局注入变量
   
3. 引入后 不打包
   externals: {//单纯引入不打包
   jquery:"jQuery"
   },

webpack图片处理

1. 在js中创建图片来引入
   file-loader 默认会在内部生成一张图片 到dist目录下
   把生成的图片的名字hash返回回来

import img from "../imgs/5.png"//把图片引入，返回的结果是一个新的图片地址
let image = new Image();
image.src = img;
console.log(img);
document.body.appendChild(image);

2. 背景图 在css中因为有了 css-loader会处理这个css中的图片
   import "./c.css"

3. 在html中引入图片, 需要借助html-withimg-loader去处理

4. 图片小的话可以使用base64转换， 需要借助url-loader

{
                test:/\.html$/,
                use:"html-withimg-loader"// 解析 html中的图片资源
            },
            {
                test:/\.(png|jpg|gif)$/,
                use: [
                    //做一个限制 当我们的图片 小于 多少k的时候 用base64来转化  否则用file-loader 产生真实的图片
                    {
                        loader:"url-loader",
                        options: {
                            limit: 200*1024,// <=200k
                            esModule:false//解决html图片不显示
                        }
                    },
                   
                    
                ]
            },
            // {
            //     test:/\.(png|jpg|gif)$/,
            //     use: [
            //         {
            //             loader:"file-loader",
            //             options:{
            //                 esModule:false
            //             }
            //         }
            //     ]
            // },

打包文件分类

1. css分类

 //抽离css样式
        new MiniCssExtractPlugin({
            filename: "css/[name].css",//css分类打包
            chunkFilename: "[id].css",
        

        })

2. 图片分类

 {
                test:/\.(png|jpg|gif)$/,
                use: [
                    //做一个限制 当我们的图片 小于 多少k的时候 用base64来转化  否则用file-loader 产生真实的图片
                    {
                        loader:"url-loader",
                        options: {
                            limit: 1,// <=200k
                            esModule:false,//解决html图片不显示
                            outputPath: "img/"//图片分类打包
                        }
                    },
                   
                    
                ]
            },

3. 给资源统一公共路径 包括 css引入 js引入 图片引入 都会加 http:xxx.com

output:{//打包后的文件配置
        path: path.resolve(__dirname, "dist3"),//路径必须是绝对路径
        filename:"bundle.js",//可以设一个一个hash值 防止缓存
        publicPath:"http:xxx.com"//统一的根路径
    },

• 如果单独给图片加上根路径,其他 js css不用加

 {
                test:/\.(png|jpg|gif)$/,
                use: [
                    //做一个限制 当我们的图片 小于 多少k的时候 用base64来转化  否则用file-loader 产生真实的图片
                    {
                        loader:"url-loader",
                        options: {
                            limit: 1,// <=200k
                            esModule:false,//解决html图片不显示
                            outputPath: "/img/",//图片分类打包
                            publicPath:"http:xxx.com"
                        }
                    },
                   
                    
                ]
            },

12 多页面应用

const HtmlWebpackPlugin = require("html-webpack-plugin");
let path = require("path");
module.exports= {
    mode:"development",
    entry:{
        home:"./src/index.js",
        other:"./src/other.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname,"dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:"./index.html",
            filename:"home.html",
            chunks:["home"],//代码块 引入homejs文件
        }),
        new HtmlWebpackPlugin({
            template:"./index.html",
            filename:"other.html",
            chunks:["other", "home"],//代码块 引入other js文件
        })
    ]
}

13 配置source-map 开发调试用的

如果不配置webpack-serve-dev 默认指向dist/index.html
devtool:"source-map"
源码映射 会单独生成一个sourcemap 文件，出错了 会标识 当前报错列和行 大 和 全。

目的是配合webpack-serve-dev 调试代码用的，

    // "source-map": 源码映射 会单独生成一个sourcemap 文件，出错了 会标识 当前报错列和行 大 和 全
    // eval-source-map: 不会产生单独的文件， 但是可以显示列和行
    // cheap-module-source-map:生成单独的映射文件， 不会产生列和行，没有关联
    //  cheap-module-eval-source-map： 不会生成单独的映射文件， 也不会产生列和行，集成到打包的后的文件
    devtool:"source-map",//增加映射文件（源文件），可以帮助我们调试代码

14 watch的用法

实时监控打包
watch: true,
watchOptions: {//监视的选项
poll: 1000,// 每秒 问我1000次
aggregateTimeout: 500,//防抖 我一直输入代码 延时时间
ignored:/node_modules/ //不需要监控的目录
},