webpack知识点分享

我们都知道webpack打包资源都是能直接打包js资源的，但是html与css资源应该是怎么打包呢？今天我们来了解一下。

首先我们写一个demo来分析。以下是我的文件配置：

都是基础配置，下面看一下webpack.config.js的配置

const path = require('path')

module.exports={
    // 设置开发环境
    // 开发环境：development
    // 生产环境：production
    mode: 'development',
    //入口
    entry:{
        main: './src/js/index.js'
    },
    //出口
    output:{
        path: path.resolve(__dirname,'mybuild'),
        filename:'main.js'
    }
}

上面是一个非常原生的项目，以上为开发环境，入口函数是index.js，输出的路径是绝对路径，用的是node的自带的path模块，输出文件夹是mybuild，输出文件名是main.js。

下面我们先打包一次分析一下，输入的命令是 webpack

终端告诉我们index.js和data.json成功编译在main.js文件中，然后我们去看文件格式可以看到文件确实编译在mybuild文件夹下的main.js，我们打开该文件也可以看到我们写的js代码和json文件。

以上是开发环境的打包，我们来看一下生成环境是怎么打包的，将webpack.config.js的mode模式改为production，再打包一次

可以看到相对于生产模式，这样直接删除了没用的代码和空格压缩，大大提升了项目的性能，降低了项目的大小

这就是最常规的打包。

但是这只是打包js文件，没有打包到我们表现于浏览器上面的HTML文件呢，下面我们通过一个配置实现

我们可先安装一个插件，运行 npm install html-webpack-plugin -D 这命令，我们还可以通过这个安装命令，知道这个插件是放在plugins下面的，所以我们可以如下配置

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

module.exports = {
    // 设置打包环境  ,
    // 开发环境：development
    // 生产环境：production
    mode: 'development',
    entry: {
        main: './src/js/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'mybuild'),
        filename: 'main.js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

这次通过打包后可以看到输出路径中多了一个index.html，且浏览器如下

注意这个html文件不是我们写的，是自己生成的，而且脚本引入多了一个defer，这个大概意思是延迟加载，也就是说等dom文件完全加载完再运行它。

但是对于这个插件，我们还有别的玩法，就是我们可以生成不同的页面，而且还能压缩它，因为上线肯定是压缩过的代码运行起来会非常的快。

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

module.exports = {
    // 设置打包环境  ,
    // 开发环境：development
    // 生产环境：production
    mode: 'development',
    entry: {
        main: './src/js/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'mybuild'),
        filename: 'main.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/html/index.html',
            filename: 'mybuild.html',
            title: '你好 WebPack',
            minify: {
                collapseWhitespace :true, //清除空格换行
                removeComments: true, //清除注释
            }
        }),
        new HtmlWebpackPlugin({
            template: './src/html/index.html',
            filename: 'user.html',
            title: '你好 WebPack'
        })
    ]
}

上面我通过复杂多个对象，输入不同的配置，从而生成了不同的页面，如下图

可以看出以一个经过压缩，一个没有压缩，如果每一个都配置上压缩，那就可以大大的优化项目的结构，让项目跑的更快

然后有了html和js肯定不够的，我们还需要样式去装饰它，但是webpack一开始是不认识css文件的，所以我们需要下载一个包，命令： npm i css-loader style-loader -D

并在下面配置webpack.config.js

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

module.exports = {
   ...
    module:{
        rules: [
            {
                test:/.css$/i,
                use:['style-loader','css-loader'],
            }
        ]
    },
    ...
}

这样我们就可以打包css文件了，我们去看一下

但是这样我发现了一个问题就是css的代码打包后跑到main.js中了，这样肯定是不合适的，因为如果样式过大肯定会拖延项目的运行，所以我们就要将css文件分割出来

然后我们先安装一个包：npm i mini-css-extract-plugin -D

然后配置文件如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')


module.exports = {
    ...
    module:{
        rules: [
            {
                test:/.css$/i,
                use:[MiniCssExtractPlugin.loader,'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/html/index.html',
            filename: 'mybuild.html',
            title: '你好 WebPack',
            minify: {
                collapseWhitespace :true, //清楚空格换行
                removeComments: true, //清楚注释
            }
        }),
        new HtmlWebpackPlugin({
            template: './src/html/index.html',
            filename: 'user.html',
            title: '你好 WebPack'
        }),
        new MiniCssExtractPlugin({
            filename:'./css/index.css' // 打包后css的存放路径已经名称
          })
    ]
}

在里面使用了MiniCssExtractPlugin.loader可以将css分离出来，但是还不够，还要再在插件中实例这个方法，传入打包文件的名字，我们看一下打包后的文件结构

好处：

1，从js文件中抽离css代码，减少js文件体积

2，当js文件比较庞大的时候，可以避免阻碍页面渲染

3，提高渲染速度

注意：如果是用其他的css预处理器，可以引入相关的包，并输入相对应的规则，这样就可以大大的提高我们的开发效率。