webpack搭建vue脚手架

最新推荐文章于 2024-07-17 16:53:29 发布
最新推荐文章于 2024-07-17 16:53:29 发布
阅读量532 收藏 1
点赞数 1
文章标签： webpack vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60587956/article/details/126808303
版权

初始化项目

npm init -y

安装webpack相关

npm i  webpack webpack-cli webpack-dev-server -D

安装解析vue的插件

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

根目录下创建webpack.config.js文件

这里注意vue-loader不支持oneOf 不然会报错

const path = require('path')

//  引入vue-loader的内置插件
const {VueLoaderPlugin} = require('vue-loader')


module.exports = {
    // 配置入口文件
    entry:'./src/main.js',
    // 配置文件的出口
    output:{
        path:path.resolve(__dirnamem, 'dist'),
        filename:'main.js'
    },
    // 配置loader
    module:{
        rules:[
            {
                test:/\.vue$/i,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
    ]
}

创建html模板

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

安装解析生产html插件

npm i  html-webpack-plugin --save-dev

配置

// 引入 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')


    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),

解析样式

npm i css-loader less-loader postcss-loader postcss-preset-env style-loader --save-dev

            {
                test:/\.vue$/i,
               loader: 'vue-loader'
            },
            {
                test:/\.css$/i,
                use:['stylel-loader', 'css-loader']
            },
            {
                test:/\.less$/i,
                use:['stylel-loader'，'css-loader', 'less-loader']
            },

安装postcss-preset-env 能解决css大多数样式兼容性问题 需要和packjson.js中的browserslist指定兼容性配合使用

packjson.js

"browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]

封装样式loader

const getStyleLoaders = (pre) => {
  return [
    "style-loader",
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 需要安装postcss-preset-env 能解决css大多数样式兼容性问题 和packjson.js中的browserslist来指定兼容性
          ],
        },
      },
    },
    pre
  ].filter(Boolean);
};
            {
                test:/\.vue$/i,
               loader: 'vue-loader'
            },
            {
                test:/\.css$/i,
                use: getStyleLoaders()
            },
            {
                test:/\.less$/i,
                use: getStyleLoaders("less-loader"),
            },

处理图片

npm i image-minimizer-webpack-plugin imagemin
无损压缩 
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被转为base64处理
          },
        },
      },
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");//压缩图片

  optimization: {
    minimizer: [
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  },

这里也可以不做图片的压缩配置，自己手动压缩图片

压缩css并提取css成单独文件

npm i css-minimizer-webpack-plugin mini-css-extract-plugin -D
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//将css代码单独打包
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//css压缩

//提取css成单独文件
const getStyleLoaders = (pre) => {
  return [
    MiniCssExtractPlugin.loader,//修改
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env",
          ],
        },
      },
    },
    pre
  ].filter(Boolean);
};
 压缩css
 new MiniCssExtractPlugin({
      filename: 'static/css/[name].[contenthash:10].css',
      chunkFilename: 'static/css/[name].[contenthash:10].chunk.css'
    }),

    minimizer: [
      new CssMinimizerPlugin(),//css压缩
      new TerserWebpackPlugin(),//js压缩 因为css压缩了不压缩代码会有问题
      new ImageMinimizerPlugin({
    ...
      }),
]

配置eslint 和babel处理js文件

npm i babel-loader eslint-webpack-plugin  eslint eslint-webpack-plugin eslint-plugin-vue

创建.eslintrc.js和babel.config.js

eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
};

babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
};
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          cacheCompression: false,
        },
      },
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),处理src文件夹中的内容
      exclude: "node_modules",//不处理node_modules文件夹中的内容
      //开启缓存
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"//缓存文件路径
      ),
    }),

环境变量处理

npm i cross-env
// 需要通过 cross-env 定义环境变量 获取环境变量

const isProduction = process.env.NODE_ENV === "production";

packjson.js

  "scripts": {
    "start": "npm run dev",
//开发模式
    "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.config.js",
//生产模式
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.config.js"
  },

webpack.config.js

// 需要通过 cross-env 定义环境变量 获取环境变量
const isProduction = process.env.NODE_ENV === "production";
const { DefinePlugin } = require("webpack");

    //定义环境变量
    //cross-eny定义的环境变量给webpack打包工具使用
    //DefinePlugin 定义的环境变量才是给源代码使用的 从而解决vue3页面警告的问题
    new DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false

    }),

处理图标

在index中引入

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="short icon" href="favicon.ico">
  <title>reactcli</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

这还不能实现效果，因为webpack只打包了src下的文件，index.html所处的public文件不会处理，

单纯只是引入找不到public下的图标文件

通过copyplugin处理

const CopyPlugin = require("copy-webpack-plugin");//webpack没有处理public文件夹下文件 所有我们直接复制过去

    // 将public下面的资源复制到dist目录去（除了index.html）
  new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          toType: "dir",
          noErrorOnMissing: true, // 不生成错误
          globOptions: {
            // 忽略文件
            ignore: ["**/index.html"],
          },
          info: {
            // 跳过terser压缩js
            minimized: true,
          },
        },
      ],
    }),
  ].filter(Boolean)

根据环境变量配置开发模式和生产模式下配置

// webpack.config.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");

// 需要通过 cross-env 定义环境变量
const isProduction = process.env.NODE_ENV === "production";

const getStyleLoaders = (preProcessor) => {
  return [
    isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader",
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["postcss-preset-env"],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: isProduction ? path.resolve(__dirname, "../dist") : undefined,
    filename: isProduction
      ? "static/js/[name].[contenthash:10].js"
      : "static/js/[name].js",
    chunkFilename: isProduction
      ? "static/js/[name].[contenthash:10].chunk.js"
      : "static/js/[name].chunk.js",
    assetModuleFilename: "static/js/[hash:10][ext][query]",
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
      },
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          cacheCompression: false,
          plugins: [
            // "@babel/plugin-transform-runtime" // presets中包含了
          ],
        },
      },
      // vue-loader不支持oneOf
      {
        test: /\.vue$/,
        loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
        options: {
          // 开启缓存
          cacheDirectory: path.resolve(
            __dirname,
            "node_modules/.cache/vue-loader"
          ),
        },
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules",
      cache: true,
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "../public"),
          to: path.resolve(__dirname, "../dist"),
          toType: "dir",
          noErrorOnMissing: true,
          globOptions: {
            ignore: ["**/index.html"],
          },
          info: {
            minimized: true,
          },
        },
      ],
    }),
    isProduction &&
      new MiniCssExtractPlugin({
        filename: "static/css/[name].[contenthash:10].css",
        chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
      }),
    new VueLoaderPlugin(),
    new DefinePlugin({
      __VUE_OPTIONS_API__: "true",
      __VUE_PROD_DEVTOOLS__: "false",
    }),
  ].filter(Boolean),
  optimization: {
    minimize: isProduction,
    // 压缩的操作
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserWebpackPlugin(),
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
    splitChunks: {
      chunks: "all",
    },
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`,
    },
  },
  resolve: {
    extensions: [".vue", ".js", ".json"],
  },
  devServer: {
    open: true,
    host: "localhost",
    port: 3000,
    hot: true,
    compress: true,
    historyApiFallback: true, // 解决vue-router刷新404问题
  },
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? "source-map" : "cheap-module-source-map",
};

vue的全家桶配置

vue-router

npm i vue-router


在src文件下创建一个 router 文件夹，里边创建一个index.js

import { createRouter,createWebHistory } from 'vue-router'
import index from './components/index.vue'
import login from './components/login.vue'
const routerHistory = createWebHistory()
const routes = [
    {
        path:'/',
        name:'index',
        component:index
    }, 
    {
        path:'/login',
        name:'login',
        component:login
    }
]
const router = createRouter({
    history: routerHistory,
    routes
})
export default router



在main.js中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './index.css'
const app = createApp(App);
app.use(router);
app.mount('#app')


vuex


安装 vuex

npm i vuex


在src文件下创建一个 store 文件夹，里边创建一个index.js

//  准备引入 vuex
import { createStore } from 'vuex'
 
const store = createStore({
    // state:{},
    state(){},
    mutations:{},
    getters:{},
    actions:{},
    modules:{}
})
export default store


在main.js中引入veux


import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 挂载 
createApp(App).use(router).mount('#app')
扣1送地狱火
关注
专栏目录
webpack 创建 vue脚手架项目
domunweb的博客
03-21 571
1.安装 node   安装地址：  https://nodejs.org/zh-cn/   node -v 查看nodeJS是否安装成功及版本号   npm -v 查看npm版本号 2.安装GIT   安装地址：https://git-scm.com/   git -versi...
使用webpack搭建一个简单的vue脚手架
王金鑫的博客
08-17 275
生成package.json npm init 安装依赖 npm i webpack vue vue-loader css-loader vue-template-compiler 新建文件夹src，创建文件app.vue <template> <div class="text">{{text}}</div> </template> <script> export default { data(){ retur
Vue脚手架安装（保姆级）
最新发布
大学生小郑的博客
07-17 1748
Vue脚手架安装（保姆级）
webpack搭建vue项目，实现脚手架功能
唐吉sir
03-14 298
webpack搭建vue项目，实现脚手架功能 本文基于node.js开发环境，安装完node之后新建项目，通过webpack配置，实现vue-cli脚手架功能 对于刚刚接触编程的人来说，最难的可能并不是学习一种新语法或者框架，而是编程思维，这种思维在调试的时候显得尤为重要，拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需...
【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目
weixin_30621919的博客
05-09 381
　　最近更新了webpack配置详解，可移步vue-cli webpack详解 　　对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个<script>标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。对于一个需要长期维护和大型的项目...
webpack构建Vue脚手架
Jacky的笔记
07-13 642
新建一个文件夹，在这个文件夹下安装依赖。基于 webpack 5 从零搭建 Vue 脚手架使用的依赖有：vue、element-ui、vue-router 开发依赖有：webpack、webpack-cli、vue-loader、vue-template-compiler、sass-loader、sass、css-loader、style-loader、babel-loader、@babel/core、@babel/preset-env有些暂时用不到，但是可以先一次性把他们安装进来。写页面需要index.h
基于webpack搭建vue2.0的脚手架项目
10-11
本篇文章将深入探讨如何基于Webpack搭建Vue 2.0的脚手架项目。 首先，让我们理解Vue 2.0的核心特性。Vue 2.0引入了虚拟DOM，提高了性能并降低了内存消耗。它支持单文件组件（Single File Components, SFCs），使得...
使用webpack搭建vue脚手架
m0_59537414的博客
12-04 343
使用webpack搭建vue脚手架，便于了解vue以及webpack
webpack-vue-:自己搭建的一个vue的脚手架，有热更新，生产模式，开发模式，里面备注写的很详细
05-18
自己搭建的vue的脚手架，又热更新（目前有小bug，会刷新整个网页）， 每个文件的备注都写的很详细   安装依赖:npm install/cnpm install 运行：npm run egg 打包：npm run badegg 更多其他功能请看 package.json里...
基于webpack，搭建Vue脚手架项目
Greenhand_BN的博客
05-12 566
由于长时间没用vue脚手架搭建项目，害怕自己忘了，于是有了这篇文章。虽然网上有很多，但是自己写写，也挺好 首先，node环境和脚手架是必须的！如果有小白，别问，问就是跟着操作。 node环境 官网下载：https://nodejs.org/en/download/ 无脑下一步就行了 终端（cmd或者vscode终端都可以，我用的git），输入下面代码，能看待版本号，说明成功（） node -v npm -v vue脚手架 安装方式：这里我用的 npm （淘宝镜像），网上有帖子用的 cnpm ，说是 c
搭建vue脚手架_webpack搭建vue脚手架
weixin_39657662的博客
12-13 62
1、先在本地安装webpack，我是按照教程来的https://jingyan.baidu.com/article/a65957f43f390524e77f9b4c.html用命令webpack -v 成功后直接出版本号；2、建立三个文件 index.html App.js main.js3、每个文件的截图index.htmlmain.jsApp.js遇到的两个bug：1、webpack打包时提示...
webpack搭建vue脚手架环境
weixin_65859689的博客
03-02 953
一、前端项目搭建 1. 建立好自己本地的项目目录 2. 初始化项目的环境 package.json使用的是npm init -y 作用是：依赖清单记录、启动命令、版本信息等，包管理器 3. 安装webpack -- npm i webpack -D （放在开发环境里） 1. 开发环境 -- npm run server --save-dev（--save-dev 缩写 -D ） 运行/生产环境 -- npm run build -S（-S可忽略不写） 2. 如果出现...
webpack搭建vue脚手架（从零开始）
自然 醒的博客
08-16 876
都会作为模块处理。在webpack4以及之前版本都需要借助file-loader和url-loader进行打包图片，而在webpack5版本中不需要了，只需要进行配置就可以了，不需要进行任何loader。就会生成一个index.html和bundle.js,这时，点开index.html就能看的Hello World了，但是css还不能生效，需要借助一些loader去加载静态资源。输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
使用webpack搭建vue项目实现脚手架功能
htong521的博客
05-25 611
通过webpack配置，实现与vue-cli相同的效果 1. 创建一个vue项目 使用命令行mkdir vuedeom 或者直接新建一个vuedemo空文件夹，然后命令行cd vuedemo，使用npm init -y初始化，此时你会看到文件夹多了一个package.json的文件，内容大致如下： { "name": "vuedemo", "version": "1.0.0", "des...
Vue-Webpack简单脚手架搭建
八卦程序的专栏
08-20 1590
搭建简单的Vue脚手架 基本安装 mkdir vue-demo && cd vue-demo npm init -y cnpm install --save-dev webpack html-webpack-plugin clean-webpack-plugin webpack-dev-server cnpm install --save-dev babel-core babel-load
webpack 搭建vue脚手架
weixin_53125679的博客
06-26 218
webpack 搭建vue脚手架 初始化项目 npm init -y 安装webpack 和webpack-cli npm i webpack webpack-cli --save-dev 解析 .vue 的文件(单文件组件)，安装 vue, vue-loader, vue-template-compiler 三个插件 npm i vue vue-loader vue-template-compiler --save-dev 项目根目录下创建src文件夹， 在里边创建一个main.j
基于webpack搭建一个vue的脚手架
qq_53260490的博客
12-15 1150
先放教程，跟着做就ok，然后说一下坑，主要是在webpack.config.js里： 1.执行npm run dev会报错：把devServer这个对象注释掉就完了 2.警告：加一行：mode : 'development' 这是自己搭建的vue脚手架，基于webpack配置，可以打包， 前几天还自己写了一下CLI，本来可以做成像vuecli一样， npm install lemon-cli -g下载下来 然后lemon init <templatename> <dir>
教你用webpack搭一个vue脚手架[超详细讲解和注释！]
m0_61451649的博客
07-10 369
├── build 构建服务和webpack配置|—— build.js webpack打包服务|—— webpack.base.conf.js webpack基本通用配置|—— webpack.dev.conf.js webpack开发环境配置|—— webpack.prod.conf.js webpack生产环境配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值