完整教程：webpack打包学习

vue开发

现在项目里安装vue：

npm install vue

vue的文件后缀是.vue

webpack不认识vue的话就接着安插件

npm install vue-loader -D

这是.vue文件： 

             {{title}}                    我是内容                 export default {        data(){            return{                title:"我是vue的标题"            }        }    }     .title_vue{        color:red;        font-size: 100px;    }    .content{        color:yellow;        font-size: 30px;    }

也要在配置文件里添加插件帮助我们做额外的事情

const path = require('path');const { VueLoaderPlugin } = require('vue-loader/dist/index'); module.exports = {  // 设置打包的模式  mode: 'development',    // 设置入口文件  entry: './src/component/cpns.js',    // 设置输出  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist'),    // assetModuleFilename: 'abc.png'  },   // 配置模块规则  module: {    rules: [      {        test: /\.css$/,        use: [          "style-loader",           "css-loader",           "postcss-loader"        ]      },{        test: /\.less$/,        use:[ "style-loader","css-loader","less-loader"]      },      {        test:/\.(png|jpe?g|svg|gif)$/,        type: 'asset/resource',        //打包两张图片，并且这两张图,        //将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中        //type:"asset/inline"        parser:{          dataUrlCondition:{            maxSize: 60 * 1024          }        },        generator:{          //不写死，使用占位符          //name:指向原来的图片名称          //ext：扩展名          //hash:webpack生成的hash值          filename:"img/[name]_[hash:8][ext]"        }      }      ,{        test:/\.js$/,        use:[          {              loader:"babel-loader",              options:{                plugins:[                  "@babel/plugin-transform-arrow-functions",                ]              }          }        ]      },      {        test:/\.vue$/,        loader:"vue-loader"      }    ]  },  plugins:[    new VueLoaderPlugin()  ]};

使用是这样：

import { createApp } from 'vue'import Hello from './vue_demo/Hello.vue' createApp(Hello).mount('#app')

打包完运行到浏览器就是这样： 

@vue/compiler-sfc

有的插件需要手动安装,安装这个插件以对template进行解析

npm install @vue/compiler-sfc -D

配置完对应的vue插件后就可以支持App.vue的写法了

我们也可以编写其他的.vue文件来编写自己的组件

resolve模块解析

resolve用于设置模块如何被解析：

在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库

resolve可以帮助webpack从每个require/import语句中，找到需要引入到合适的模块代码

webpack使用enhanced-resolve来解析文件路径

webpack能解析三种文件路径

绝对路径

        由于已经获得文件的绝对路径，因此不需要再做进一步的解析

相对路径

        在这种情况下，使用import或者require的资源文件所处的目录被认为是上下文目录

        在import/require中给定的相对路径会拼接此上下文路径来生成模块的绝对路径

模块路径

        在resolve.module中指定的所有目录检索模块

        默认值是[‘node_modules’]，所以默认会从node_modules中查找文件

   我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置

extensions和alias配置

extensions是解析到文件时自动添加扩展名

默认值是[ '.wasm','.mjs','.js','.json' ];

如果代码中想要添加加载.vue或者jsx或者ts等文件时，我们必须要自己写上扩展名

我们还可以给它配置别名，给常见的路径起一个别名

resolve:{    extensions:[".js",".json",".vue",".jsx",".tsx"],    alias:{      utils:path.resolve(__dirname,"./src/utils")    }  },

配置：

const path = require('path');const { VueLoaderPlugin } = require('vue-loader/dist/index'); module.exports = {  // 设置打包的模式  mode: 'development',    // 设置入口文件  entry: './src/main.js',    // 设置输出  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist'),    // assetModuleFilename: 'abc.png'  },  resolve:{    extensions:[".js",".json",".vue",".jsx",".tsx"]  },  // 配置模块规则  module: {    rules: [      {        test: /\.css$/,        use: [          "style-loader",           "css-loader",           "postcss-loader"        ]      },{        test: /\.less$/,        use:[ "style-loader","css-loader","less-loader"]      },      {        test:/\.(png|jpe?g|svg|gif)$/,        type: 'asset/resource',        //打包两张图片，并且这两张图,        //将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中        //type:"asset/inline"        parser:{          dataUrlCondition:{            maxSize: 60 * 1024          }        },        generator:{          //不写死，使用占位符          //name:指向原来的图片名称          //ext：扩展名          //hash:webpack生成的hash值          filename:"img/[name]_[hash:8][ext]"        }      }      ,{        test:/\.js$/,        use:[          {              loader:"babel-loader",              options:{                plugins:[                  "@babel/plugin-transform-arrow-functions",                ]              }          }        ]      },      {        test:/\.vue$/,        loader:"vue-loader"      }    ]  },  plugins:[    new VueLoaderPlugin()  ]};

如果是一个文件的话：

文件具有扩展名则直接打包文件

否则使用resolve.extensions选项作为文件扩展名解析

如果是一个文件夹的话：

会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找

        resolve.mainFiles的默认值是['index']

        再根据resolve.extensions来解析扩展名