webpack打包学习

vue开发

现在项目里安装vue：

npm install vue

vue的文件后缀是.vue

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

npm install vue-loader -D

这是.vue文件： 

<template> <div><h2 class="title">{{title}}</h2><p class="content">我是内容</p></div>
</template><script>export default {data(){return{title:"我是vue的标题"}}}
</script><style>.title_vue{color:red;font-size: 100px;}.content{color:yellow;font-size: 30px;}
</style>

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

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来解析扩展名