webpack打包学习

vue开发

现在项目里安装vue：

javascript 复制代码

npm install vue

vue的文件后缀是.vue

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

javascript 复制代码

npm install vue-loader -D

这是.vue文件：

javascript 复制代码

<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>

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

javascript 复制代码

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()
  ]
};

使用是这样：

javascript 复制代码

import { createApp } from 'vue'
import Hello from './vue_demo/Hello.vue'

createApp(Hello).mount('#app')

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

@vue/compiler-sfc

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

javascript 复制代码

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等文件时，我们必须要自己写上扩展名

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

javascript 复制代码

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

配置：

javascript 复制代码

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