学习webpack的基本配置和splitChunks配置

文章目录

    • entry 入口配置
    • output 出口配置
    • 处理vue文件
    • 处理CSS文件
    • 处理图片
    • 配置文件压缩
    • 公共库代码分离
      • 参数chunks

entry 入口配置

entry表示入口,一般是一个字符串,表示入口文件的路径。如果是多入口就需要将entry拥有很多键值对的对象,属性名就是每个入口的名字,值是每个入口的路径。

// 单入口
entry: './src/main.js'
// 多入口
entry: {
    main: './src/main.js',
    other: './src/other.js'
}

output 出口配置

output出口的配置一般配置产出文件的名字和路径。如果入口配置是多入口,那出口文件也肯定是一一对应的。

const path = require('path')

output: {
    filename: '[name].js' // [name]表示生成文件名字与入口设置的名字相同
    path: path.resolve(__dirname, 'dist')// 表示最后输出的目录是当前项目的dist目录下,__dirname是一个在node.js下面的一个表示当前项目路径的常量
}

配置好了entry和output之后。如果你的项目只有js文件,那么,它已经可以正常运行了。通过运行webpack命令

// --progress 显示打包进度百分比
// --stats=varbose 显示打包全日志,还有其它属性值,normal默认日志显示设置,只显示部分主要日志。errors-info只在报错时显示错误日志
npx webpack --stats=varbose --progress

假设你项目入口是main.js文件。它引用了a.js和b.js两个文件。在运行上面的命令之后,在项目的dist文件生成了一个新的main.js文件。这个文件就是打包之后的产物。

我们知道了webpack的第一个作用:打包。打包各种类型的文件。

上面我们只有js文件,未免太简单了些。其实webpack可以还可以打包CSS,图片,Vue等各种类型的文件

处理vue文件

下面我们添加处理vue文件的打包方式。处理vue类型的文件,需要专门的vue-loader,配置到规则里面。

module: {
    rules: [
        {
            // 处理.vue后缀的文件
            test: /\.vue$/,
            use: 'vue-loader'
        },
    ]
}

这样就可以了吗?答案是还不够。还需要在插件里面添加一个对应的VueLoaderPlugin插件。

const { VueLoaderPlugin } = require('vue-loader')
module: {
    rules: [
        {
            // 处理.vue后缀的文件
            test: /\.vue$/,
            use: 'vue-loader'
        },
    ]
},
plugins: [
    new VueLoaderPlugin() // ???
]

这样才可以完整的处理vue类型的文件。它其它是将.vue文件变成了三个不同类型文件,其中的script和templte都会被处理成js,style标签的部分则会由vue-style-loader去处理。

处理CSS文件

其中 vue-style-loader 是对.vue文件里面css部分进行处理,对所有样式添加scoped字段,使之只在组件div下生效。不进行这层的处理,样式就全部都成了全局样式。

module: {
    rule: [
        {
            // 处理css文件
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ]
        }
    ]
}

css-loader和style-loader的区别:css-loader 会把css文件打包成commonjs模块。style-loader 则是主要把js里面的样式资源插入到html的style标签里面,让样式生效。

处理图片

module: {
    rule: [
        {
            test: /\.(png|svg|jpe?g|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name:'assets/[name].[ext]',
                }
            }
        }
    ]
}

使用 file-loader 来处理各种后缀的图片,png,svg,jpg,gif格式的图片。这个加载器的主要作用是解决开发和打包时,图片路径不一致,导致的图片不能访问的问题。也就是解决路径问题

还有一个loader是 url-loader,这两个加载器的区别是:url-loader 主要作用是为了减少http请求。会将图片编码成dataURI(base64等)打包到文件里面,这样直接访问dataURI就可以显示图片了,也就不用再请求了。

当然也不能全部图片都进行编码,大尺寸的图片编码非常消耗性能,还是应该使用http请求。所以 url-loader 里面有一个参数limit用来限制可以进行编码的图片大小,小于这个尺寸的会将图片进行编码,而超过这个尺寸的图片还是会使用 file-loader 进行处理。也就是说 url-loader 其实是包含有 file-loader 的。

// url-loader的使用方法
module: {
    rule: [
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000, // 单位是:B(字节)
            }
        }
    ]
}

配置文件压缩

目前我们打包好的文件,直接开始就可以看到源码,基本就是webpakc把不同文件使用胶水代码合并在了一起。

所以不能直接使用在生产环境中,需要将代码压缩,使其基本不可读。保护代码的安全

而且压缩代码,文件的体积也会变小,有利于网络传输

optimization: {
    minimize: true // 开启默认压缩配置
    minimizer: [ // 自定义压缩配置(如果需要的话)
        new TerserPlugin({
            ......
        })
    ]
}

具体配置用到的时候再说。

公共库代码分离

optimization: { // 这个配置项是对打包流程进行优化的配置
        splitChunks: { // 
            cacheGroups: { //
                // 外部也可以进行配置,当内部配置不与外部配置冲突的时候,使用内部内部配置,不冲突时,共用。
                commons: {
                    test: /[\\/]node_modules[\\/]/, // 配置是一个正则,所以引入来自node_modules文件夹里面的文件,都会打包成一个vendors.js文件
                    name: "vendors", // 打包之后,文件的名字
                    chunks: "initial" // 不同导入方式进行配置

                }
            }
        }
    }

参数chunks

参数chunks有三个值,分别是initial:对异步或者同步导入的模块分别进行打包,打包到不同的文件里面。async:不配置时的默认值,只会将异步导入的模块进行单独打包。all:无论异步还是同步加载的模块,都会单独进行打包,并且最后都会打包到同一个文件里面去。

chunks的参数提到了异步和同步导入模块。那么怎么算是同步导入,怎么又算是异步导入呢?

  • 同步写法:import 'xxx' 或者 require('xxx')
  • 异步写法:import('xxx') 或者 require('xxx', () => { yyy })

而我们常用的 import xxx from 'path' 这种写法也是同步导入的。

参考MDN上说的,只有 import('xxx') 这种像是函数一样的调用是异步导入模块的,其它都是同步的。而且 import('xxx') 会返回一个Promise对象去操作异步返回的模块对象。

import('XXX')
    .then(module => { // 像这样去操作异步返回的模块
        ......
    })
    .catch(error => {
        ......
    })

这种import异步导入模块的常见用法是在routes.js路由里面。

{
    path: '',
    component: () => import('XXX'), // 异步加载路由
    children: [
        ......
    ]
}

同步导入写法 import 'xxx' 它的作用是运行模块(而不是导入模块)。使用模块的副作用。比如使用这样方法导入CSS,运行模块会进行样式的添加,本身就是一种副作用。而不是希望得到CSS文件里面暴露的模块(这也是不可能的)。

你可能感兴趣的:(Webpack,webpack,splitChunks)