webpack5简单搭建vue项目

写在前面

webpack在当今的前端领域已经是不可缺失的一部分了，不多说了，先了解一下webpack的四大核心

entry（入口）

entry是一切的起点，通过import告诉webpack引用了哪些模块

// index.js

import module from './module'
import './index.css'
import './index.scss'
module()
console.log(2222)

loader

如果将非js文件当作模块引用进来的时候，webpack是不具备转换非js文件的，这时可以通过loader把css,scss进行转换，loader是从下到上，从右到左编译的

// webpack.config.js

module.exports = {
  mode:'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist'
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.scss$/,
        use:['style-loader','css-loader','sass-loader']
      }
    ]
  }
}

plugin （插件）

plugin主要是对loader的一个扩展，通过html-webpack-plugin打包后会创建html文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack =require('webpack')
module.exports = {
  mode:'development',
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist'
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.scss$/,
        use:['style-loader','css-loader','sass-loader']
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
      {
        test: /\.md$/i,
        use: ["html-loader",'markdown-loader'],
      },
    ]
  },
  plugins:[
    new webpack.ProgressPlugin(), //打包进度报告
    new HtmlWebpackPlugin()
  ]
}

output (出口)

顾名思义就是打包后导出的文件在哪

好了 基本的了解就到这 现在我们可以从0搭建一个vue项目

从0搭建一个vue项目

题外话

没学webpack之前，就在想vue是怎么打包的，入口文件只有一个main.js,而且单文件里面的js,css是如何获取的，学了之后才发现原来有个vue-loader这个核心，vue文件的编译都是基于这个核心

初始化项目

// 初始化项目 创建一个package.json
npm init -y 

// 安装webpack
npm i webpack webpack -D

// 创建一个html模板
mkdir public && cd public

// 存放开发文件
mkdir src && cd src

目录结构如下

├── public                     # 静态资源
│   └── index.html             # html模板
├── src 
    |—— main.js                # webpack入口文件

新建webpack.config.js

先配置一些基本的东西

// webpack.config.js

// 加上这个vscode会有提示
/** @type {import('webpack').Configuration} */

const path = require('path');
const webpack =require('webpack');

function resolve(dir) {
  return path.resolve(__dirname, dir)
}

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map', // 提示哪行错误
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'static/js/[name].[contenthash].js',
    clean: true  // 打包清除旧文件
  },
 
  plugins: [
    new webpack.ProgressPlugin(), //打包进度报告
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

基本配置写好后，就可以开始在src里面写vue的代码了，这里需要npm i vue安装好需要的开发的工具，然后写好后我们来配置一下解析vue相关的内容，前面提到的重中之重，也就是核心vue-loader

vue-loader

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件,点击这里,基本上看着文档来打包一般没问题

安装

npm i  vue-loader vue-template-compiler -D

配置

// webpack.config.js

const { VueLoaderPlugin } = require('vue-loader');

module.exports ={
// ...其他配置
module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
     //...其他插件
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

这个基本的配置就已经打包成功了，这里可以通过安装webpack-dev-server开启一个服务器看看效果

webpack-dev-server

创建一个运行脚本，运行npm run dev

 "scripts": {
    "build": "webpack",
    "dev": "webpack serve --open" 
  },

在webpack.config.js添加devServer配置

// webpack.config.js

module.exports ={
// ...其他配置

devServer: {
    static: './dist',  // 开启的目标文件
    hot: true,  // 开启热更新
  }
}

就这一段代码是不是很简单,在这里一个基本的打包，构建已经是可以的了，现在我们再来加点东西

加载css csss 文件

首先安装css-loader sass-loader sass

npm i css-loader sass-loader sass -D

vue-style-loader是vue-loader里面自带的loader,不需要额外引入

module: {
    rules: [
    // ...其他配置
        {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      }
    ]
}

加载图片

webpack5里面内置了解析图片类型的，所以不需要我们额外安装其他loader

module: {
    rules: [
    // ...其他配置
        {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource', 
      }
    ]
}

加载字体

module: {
    rules: [
    // ...其他配置
        {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },
    ]
}

使用别名

如果使用@/view/index这种文件路径的需要设置别名

resolve: {
    alias: {
      '@': resolve('src')
    }
  }

extensions省略文件路径

通过extensions可以不用写文件后缀

resolve: {
    // ...其他配置
    extensions: ['.js', '.json', '.vue', 'css']
  }

proxy代理

在开发环境中可以通过proxy处理跨域

 devServer: {
    // ...其他配置
    proxy: {
      '/api': {
        target: 'https://xxx.xxx',
        changeOrigin: true // 这个必须要写
        }
    },
  },

优化

美化打包进度条

想要花里胡哨的进度条?? 这里有

npm i progress-bar-webpack-plugin -D

const ProgressBarPlugin =require('progress-bar-webpack-plugin')

plugins: [
     //...其他插件
     new ProgressBarPlugin()
  ]

打包输出指定文件夹

通过type:'asset/resource'打包到指定文件夹里面，这个相当于file-loader，可以通过generator设置打包路径

module: {
    rules: [
    // ...其他配置
        {
        type:'asset/resource',
        generator: {
          filename: 'static/文件夹名称/[hash][ext][query]'
        }
      }
    ]

es6转es5

安装babel-loader

npm i  babel-loader @babel/core @babel/preset-env -D

module: {
    rules: [
    // ...其他配置
        {
        test: /\.js$/,
        exclude:/node_modules/,  // 除去 node_modules
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 预设
          }
        }
      },
    ]

完整代码

// webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function resolve(dir) {
  return path.resolve(__dirname, dir)
}

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'static/js/[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.scss$/i,
        use: ['vue-style-loader', 'css-loader','sass-loader']
      },
      {
        test: /\.css$/i,
        use: ['vue-style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/img/[hash][ext][query]'
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/fonts/[hash][ext][query]'
        },
      },
    ],
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin(),
    // new ProgressBarPlugin(), // 花里胡哨的进度条
    new webpack.ProgressPlugin(), //打包进度报告
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer: {
    static: './dist',
    hot: true,
    proxy: {
      '/api': {
        target: 'http://xxx.xxx',
        changeOrigin: true
      }
    },
  },
  resolve: {
    extensions: ['.js', '.json', '.vue', 'css'],
    alias: {
      '@': resolve('src')
    }
  },
 
}

写在最后

webpack文档虽大，但其实都是看文档配置参数而已，只要理解这些loader,plugins的作用和配置，就能掌握一些技巧，希望这篇文章大家能对webpack有新的认识