webpack4.x最新入门配置详解21. 全局变量引入问题 2. 图片处理问题 3. 打包文件分类 4. 打包多页应用

1. 全局变量引入问题 引入jquery后，如何配置使用$和window.$
2. 图片处理问题 如何打包html,js,css里的图片引用
3. 打包文件分类 不同的文件打包到对应的文件夹下
4. 打包多页应用 打包多个html页面
5. 配置source-map 使用源码映射，更好的调试代码
6. watch的用法 实时更新打包
7. webpack小插件应用 打包前清空文件目录，拷贝文件到打包目录，版权申明注释

1. 全局变量引入问题

有一些第三方模块需要依赖window上的jquery

安装jquery:

npm i jquery

使用jquery:

import $ from 'jquery';
console.log($)
console.log(window.$)  // undefined

由上图可以看出，$没有暴露给window

解决方法:

安装：

 npm i expose-loader -D

使用：

方式一：内联loader的方法：

import $ from 'expose-loader?$!jquery';

方式二：webpack.config.js->module->rules里配置：

{
 test:require.resolve('jquery'),
 use:'expose-loader?$'
},

前面的方法都需要在使用jquery的地方import导入

那么，如何直接使用$,无需import呢？

解决方法：

在每个模块中注入$对象

webpack.config.js中声明：

let webpack = require('webpack')

webpack.config.js->plugins中配置插件：

new webpack.ProvidePlugin({  // 在每个模块中注入$对象
    $:'jquery'
})

这样子就可以无需import,直接使用$, 但是window.$又变为undefined

还有一种情况，我们无需用第三方模块引入jquery,直接在页面中通过script标签引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

这种方式就可以直接拿到window.$

引入第三方模块方式总结：

expose-loader 暴露到window上
providePlugin 每个模块中注入$对象
引入不打包方式<script>

2. 图片处理问题

如何在webpack中使用图片，并且打包图片

图片的引入方式有：

在JS中创建图片来引入
在CSS中使用background:url()
<img src="" alt="" />

安装file-loader：

默认会在内部生成一张图片，到build目录下；

把生成的图片的名字返回回来

 npm i file-loader -D

webpack.config.js->module->rules里配置：

{
   test:/\.(png|jpg|gif)$/,
   use:'file-loader'
},

使用：

JS中引入图片：

import logo from './favicon.png'
let image = new Image();
console.log(logo)
image.src = logo;
document.body.appendChild(image)

CSS中引入图片：

body{
    background: pink;
    /* css-loader会将地址转换为require(url) */
    background: url("./favicon.png")  
}

html中引入图片：

安装：

npm i html-withimg-loader -D

webpack.config.js->module->rules中配置：

{
    test:/\.html$/,
    use:'html-withimg-loader' // 解析html中的图片资源
},

需要将原先file-loader模块配置修改如下：

{
    test:/\.(png|jpg|gif)$/,
    use:[{
        loader:'file-loader',
        options:{
            esModule:false
        }
    }]
},

html页面中就可以直接使用：

<img src="./favicon.png" alt=""/>

另外，有时候我们需要的图片比较小，这个时候，我们不希望请求图片，就可以使用base64

安装：

 npm i url-loader -D

webpack.config.js->module->rules中配置：

{
    test:/\.(png|jpg|gif)$/,
    use:{
        loader:'url-loader',
        options:{
            limit:200*1024 // 做一个限制，当图片<200k的时候，用base64来转化,否则用file-loader
        }
    }
},

注意：base64不会发送请求，但会比原图片大1/3

3. 打包文件分类

如果我们想把打包的文件如：img，css, js等输出到相应的目录下，该怎么做？

图片打包输出路径配置：

{
   test:/\.(png|jpg|gif)$/,
   use:{
       loader:'url-loader',
       options:{
           limit:1,// 做一个限制，当图片<200k的时候，用base64来转化,否则用file-loader
           esModule:false,
           outputPath:'img/' // 图片打包输出路径，img文件下
       }
   }

},

CSS打包输出路径设置：

webpack.config.js->plugins

new MiniCssExtractPlugin({
    filename:'css/main.css'  // 抽离出的文件名, 打包输出到css文件下

}),

如果我们的CSS，图片等路径是在域名网址下的，如何配置?

webpack.config.js->output 添加属性：

示例：

publicPath:'http://www.baidu.com/'

打包后的html：

由上图可以看出，js,img,css等路径都加上了设置好的www.baidu.com

如果，我们只需要给图片设置域名路径，其他不需要，该怎么做？

很简单，可以直接在图片的配置里加上publicPath:'http://www.baidu.com/'属性设置：

例如：

{
   test:/\.(png|jpg|gif)$/,
   use:{
       loader:'url-loader',
       options:{
           limit:1,// 做一个限制，当图片<200k的时候，用base64来转化,否则用file-loader
           esModule:false,
           outputPath:'img/', // 图片打包输出路径
           publicPath:'http://www.baidu.com/'
       }
   }
},

4. 打包多页应用

目录结构如下：

将index.js和other.js分别打包引入到index.html和other.html中： webpack.config.js配置如下：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    // 多入口
    entry: {
        home: './src/index.js',
        other:'./src/other.js'
    },
    output:{
        // [name] 这里表示home或other
        filename:'[name].js',
        path: path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'home.html',
            chunks:['home']  // 打包生成的home.html引入home.js
        }),
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'other.html',
            chunks:['other'] // 打包生成的other.html引入other.js
        }),

    ]
}

如果想在打包生成的index.html引入多个js文件，只需在chunks属性值数组里添加即可，如：

chunks:['other','home'] // 打包生成的html中引入other.js和home.js

5. 配置source-map

我们前面打包生成的代码，如果运行后出现错误，点击控制台的错误，跳转到打包后的源码错误地方，这个源码是压缩的，因此很难调试。

配置source-map源码映射，即可以轻松调试源码。

webpack.config.js配置里添加：

方式一： 会单独生成一个sourcemap文件，用于调试代码；出错了，会标识错误的列和行

devtool:'source-map', // 源码映射，会单独生成一个sourcemap文件，用于调试代码；出错了，会标识错误的列和行

方式二： 不产生单独的文件，但可以显示错误列

devtool:'eval-source-map',

方式三：产生一个单独的文件，不显示错误列

devtool:'cheap-module-source-map', // 产生后可以保留起来，用于调试

方式四： 不产生单独文件，不显示错误列，集成在打包文件中

devtool:'cheap-module-eval-source-map',

6. watch的用法

前面，我们每次改完代码，都需要手动npm run build重新打包。

那么如何实现自动监控实时打包呢？

webpack.config.js配置里添加：

watch:true, // 打开监控
watchOptions:{ // 监控的选项
    poll:1000, // 每秒监控1000次
    aggregateTimeout:500,  // 防抖 我一直输入代码，等我停了后500ms后打包
    ignored:/node_modules/  // 不需要监控的文件
},

7. webpack小插件应用

介绍三个插件：

cleanWebpackPlugin
copyWebpackPlugin
bannerPlugin

前两个是第三方模块的，第三个是内置的；

cleanWebpackPlugin插件

有时候，我们不断打包生成的文件会不断的堆积，例如：

我们用hash值生成文件名，第一次打包生成index23847583.html文件放在在dist文件夹下，第二次打包生成的index49582038.html文件放在dist文件夹下，第三次。。。

使用这个插件可以在我们打包输出目录之前，将原先的dist文件夹清空

安装：

 npm i clean-webpack-plugin -D

配置：

webpack.config.js里配置：

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

webpack.config.js->plugins 里添加：

new CleanWebpackPlugin()

copyWebpackPlugin插件 如果你想将一些文件拷贝到dist文件中，可以使用该插件；

安装：

npm i copy-webpack-plugin -D

配置： webpack.config.js里配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');;

webpack.config.js->plugins 里添加：

new CopyWebpackPlugin([
   {from:'./doc',to:'./'}
])

如图所示，上述配置，将doc里的文件拷贝到了dist文件中；

bannerPlugin插件

版权申明插件，它是webpack内部的插件

因此，先在webpack.config.js中声明：

const webpack = require('webpack');

webpack.config.js->plugins 里添加：

new webpack.BannerPlugin('该代码为小仙女所写！')

效果如下：