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文件里面暴露的模块(这也是不可能的)。