主要分为5部分，分别是entry,output,loader,plugin和mode
1.entry
指的是文件的入口，有以下几种写法：
module.exports = {
entry: 'app.js'
}
上面这种写法是
module.exports = {
entry: {
main: 'app.js'
}
}
的简写
如果要引入多文件（也就是将应用app和第三方库分离）则可以使用多个文件入口的写法
module.exports = {
entry: {
main: 'app.js',
vendor: './src/jquery.js'
}
}
还有多页面应用程序
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
2.output
指的是通过入口文件生成的出口文件，即使文件有多个入口，但是出口文件的配置只有一个。
出口文件主要有以下几个属性
module.exports = {
output:{
filename: 'index.js', // 输出文件名称，可以为指定的入口名字，也可以在出口文件中添加hash字符串，例如[name].js,[name].[hash].js;
path: './dist', // 输出文件的路径，这里输出的结果为index.js文件生成到该文件的dist文件夹下
}
}
3.mode
指的是当前webpack的打包环境，主要分为开发环境development和生产环境production。在vue-cli中的开发环境和生产环境主要有以下几个区别：
1.开发环境下有devServer而生产环境中并没有。
2.开发环境下的代码不是可压缩状态，而生产环境的代码为压缩状态；
3.开发环境下的sourceMap的最佳值为cheap-module-eval-source-map而生产环境下的sourceMap一般为false或者是source-map即看不到转换过的代码。
4.开发环境下css有模块化功能，而在生产环境中一般都是把css直接引用到js文件中。
5.开发环境下有模块热替换功能，而在生产环境中并没有该功能。
4.loader
loader主要是对源代码进行转换。loader可以让你使用import或者加载模块时预处理文件。通常使用loader是在module对象下的rules中进行相应的loader的引用，例如
module.export = {
module:{
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(svg|png|jpg|gif)$/,
loader: 'file-loader',
options:{
limit: 8196
}
},
{
test: /\.js$/,
exclude: '/(node_modules|bower_components)/',
loader: 'babel-loader'
}
]
}
}
下面介绍几种常用的loader
1.babel-loader
babel-loader主要是针对使用兼容性比较差的语法，比如在es6中使用es6语法。这种情况下如果不通过babel-loader的话会在低版本ie浏览器中出现不兼容的情况，这种情况下就得通过babel-loader解决该情况。
因为babel-loader即使在生产环境中也是需要用到的，所以使用npm安装的时候是通过
npm install --save babel-loader @babel/core @babel/preset-env webpack
完成webpack4中babel-loader的安装。
如果是低版本的webpack,比如说vue-cli2中的webpack，默认为3.x版本，这种情况下安装上面的命令行的话就会出现报错。这个时候就应该输入以下命令行
npm install babel-loader babel-core babel-preset-env webpack
在webpack配置对象中，需要添加babel-loader到配置对象中，需要进行下图的配置
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
也可以将options配置对象中的内容通过.babelrc文件提取出来进行相应的配置。
2.css-loader
顾名思义，css-loader是将css文件通过import或者require引入后进行解析，然后就能成功的引用相应的css文件。通常和style-loader连用。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
3.file-loader
主要将import或者require引入的文件生成一个具有哈希值的文件并保留原始后缀名。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]', // 文件生成名称
outputPath: './image', // 文件生成路径,一般生成在output的path的文件夹下
publicPath: '/assets', // 打包后设置对静态资源引用的位置
}
}
]
}
]
}
}
4.style-loader
当样式以<style></style>的形式加载css内容时，这个时候就会使用到style-loader,所以一般情况下css文件引入需要style-loader和css-loader进行联用。
配置如下图
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
5.url-loader
与file-loader类似，当文件大小低于所设置的limit的时候，文件则以DataUrl的形式展示出来。
通用配置如下
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 限制文件大小
mimetype: '[extname]' // 指定文件类型
fallback: 'file-loader' // 如果文件大小超过limit限制后，引用file-loader
}
}
]
}
]
}
}
file-loader和url-loader的区别？
1、url-loader依赖file-loader
2、当使用url-loader加载图片，图片大小小于上限值，则将图片转base64字符串，；否则使用file-loader加载图片，都是为了提高浏览器加载图片速度。
3、使用url-loader加载图片比file-loader更优秀,所以一般情况下引入文件都是用url-loader而不是用file-loader
如果想查看更多的loader,请参考webpack官网
