入门级：vue3使用webpack进行打包和构建【白到透明的小白都能够看懂！】

敲代码的阿凡驴
997 阅读3分钟
    • 首先使用npm包管理工具在本地安装webpack
npm install --save-dev webpack webpack-cli
    • 全局安装@vue/cli脚手架
npm install -g @vue/cli
    • 创建项目
vue create mypro
    • 安装webpack
    • webpack-dev-serverwebpack-dev-server是一个基于Express的开发服务器，它是Webpack提供的一个工具，用于在开发过程中提供方便快捷的本地开发环境。
    • html-webpack-plugin是Webpack插件的一个库，它可以自动生成一个 HTML 文件，并将打包后的各个模块自动注入到HTML文件中。该插件可以大大简化在Webpack中配置HTML的过程。
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
    • 安装loader和plugin
npm install --save-dev vue-loader vue-template-compiler css-loader style-loader sass-loader sass node-sass
  • vue-loader：Vue Loader 是将 Vue 单文件组件转换为 JavaScript 模块的 webpack loader。它允许您在构建过程中使用高级的构建工具，如预处理器、自定义块和根据条件渲染等功能。
  • vue-template-compiler：Vue 模板编译器是用来将 Vue 的模板转换为可执行渲染函数的工具。在构建 Vue 项目时，通常需要将 Vue 单文件组件中的模板编译成渲染函数，使得 Vue 在运行时可以更高效地渲染组件。
  • css-loader：CSS Loader 用于解析处理 CSS 文件中的 @import 和 url()，并将其转换为 require 语句。它允许您在 JavaScript 中导入 CSS 文件，以便在应用程序中使用 CSS 样式。
  • style-loader：Style Loader 用于将 CSS 代码插入到页面中的 <style> 标签中。它可以将 CSS 文件通过 JavaScript 动态加载和注入到页面中。
  • sass-loader：Sass Loader 是用于将 Sass/SCSS 文件转换为 CSS 的 webpack loader。它会将 Sass/SCSS 代码编译为 CSS 代码，以便在应用程序中使用。
  • sass：Sass 是一种 CSS 预处理器，它增加了许多有用的功能和语法，如嵌套规则、变量、混合宏等。Sass 在编译时会被转换为普通的 CSS。
  • node-sass：Node Sass 是一个将 Sass 编译为 CSS 的本地 Node.js 模块。它是 Sass 的 JavaScript 实现，用于进行 Sass 编译操作。
  • ！！！安装loader和plugin报错！！！

屏幕截图 2023-12-07 195641.png

  • 如遇报错解决方案(没有报错则执行第6步)
    //1.升级swiper库，由于swiper的新版本可能包含不兼容的改动，也许会有其他报错
    npm install swiper@latest
    //2.使用 `--force` 或 `--legacy-peer-deps` ，尝试使用两者来强制npm接受这个不正确的依赖关系
    npm install --force
    //或
    npm install --legacy-peer-deps
    //注意：这可能会导致项目运行时出现错误，因为依赖关系并没有实际解决。
    //3.如果都不能解决问题，可能需要检查项目中的其他依赖项，查看是否有其他版本冲突。可以使用以下命令来查看项目的依赖树：
    npm ls
  1. 在项目跟目录下创建一个webpack.config.js文件来配置webpack

d6b7728563d1e0549d69e748ad22189.png

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devServer: {
    port: 8080,
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
  },
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.js',
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        exclude: /node_modules/,
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
    }),
  ],
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm-bundler.js',
    },
    extensions: ['*', '.js', '.vue', '.json'],
  },
};
  • mode：指定Webpack的构建模式，可选值有’production’、‘development’和’none’。在不同的模式下，Webpack的行为会有所不同。
  • entry：指定Webpack的入口文件，Webpack会从入口文件开始递归地构建依赖图。
  • output：指定Webpack构建结果的输出配置，包括输出路径、输出文件名等。
  • module：定义模块的规则，配置不同类型文件的加载方式。
  • plugins：用于扩展Webpack功能的插件。可以执行各种任务，比如生成HTML文件、压缩文件等。
    • 运行我们的项目
  npm run serve
  • 在浏览器中访问http://localhost:8080查看是否成功
    • 最后打包并生成发布版本代码
npm run build
  • 将源代码中的多个模块打包、压缩、编译成一个或多个静态资源文件，最后都放入了dist文件夹中
avatar
文章
阅读
粉丝