webpack5手撸vue2脚手架

秃头王路飞
• 阅读 2827

webpack5手撸vue

相信工作个1-2年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。

{
    "name": "vue-cli-version2",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "clean-webpack-plugin": "^4.0.0-alpha.0",
        "css-loader": "^5.2.6",
        "element-ui": "^2.15.2",
        "eslint": "^7.28.0",
        "file-loader": "^6.2.0",
        "html-loader": "^2.1.2",
        "html-webpack-plugin": "^5.3.1",
        "html-withimg-loader": "^0.1.16",
        "less": "^4.1.1",
        "less-loader": "^9.0.0",
        "mini-css-extract-plugin": "^1.6.0",
        "optimize-css-assets-webpack-plugin": "^6.0.0",
        "speed-measure-webpack-plugin": "^1.5.0",
        "style-loader": "^2.0.0",
        "url-loader": "^4.1.1",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.7",
        "vue-router": "^3.5.1",
        "vue-style-loader": "^4.1.3",
        "vue-template-compiler": "^2.6.14",
        "webpack": "^5.38.1",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^3.11.2",
    }
}

因为笔者在撸的时候,发现兼容性经常出现一些问题,所以先贴上json文件,以便各位读者大佬可以省点时间。

webpack5手撸vue2脚手架 以上是我的工作目录,大家如果有自己的设置习惯,也可以按照自己的习惯来。

// 每次打包的时候清除之前dist里面的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    // 设置html模板
const HtmlWebpackPlugin = require('html-webpack-plugin')
    // 用于提取js中的css代码
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    // 这是因为在15.x.x版本之后,如果要使用vue-loader,需要在webpack种使用vue-loader自带的插件,不然没法使用vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
    // 分析各个阶段打包时长
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const { resolve } = require('path')
    // const webpack = require('webpack')
    // console.log(webpack); 

const CommonCssLoader = [{
        loader: MiniCssExtractPlugin.loader,
        options: {
            // css分包后处理背景图
            publicPath: '../'
        }
    },
    // "style-loader",
    "css-loader",
]
module.exports = {
    mode: "development",
    entry: './src/main.js',
    output: {
        path: resolve(__dirname, './dist'),
        filename: '[name].js',
        // publicPath: '../dist/images'
    },
    module: {
        rules: [
            // {
            //     test: /\.js$/,
            //     exclude: /(node_modules|bower_components)/,
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             presets: ['@babel/preset-env']
            //         }
            //     }
            // },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            },
            {
                test: /\.css$/,
                use: [
                    ...CommonCssLoader
                ]
            },
            {
                test: /\.less$/,
                use: [
                    ...CommonCssLoader, "less-loader"
                ]
            },
            {
                // test: /\.svg$/,
                // exclue 这里可以解引入element css的问题
                exclude: /\.(jpg|jpeg|png|gif|css|less|html|js|vue)/,
                loader: "file-loader"
            },
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        // 图片大小小于8kb就打包成base64格式
                        limit: 8 * 1024,
                        name: '[hash:10].[ext]',
                        outputPath: "images",
                        // publicPath: './images',
                        // esModule: false
                    }
                }]
            },
            // {
            //     test: /\.html$/,
            //     // loader: "html-loader",   //webpack4好使,5用下面的,可以解决html里面img引入不仅图片的问题     
            //     loader: 'html-withimg-loader'
            // }
        ]
    },
    plugins: [
        // 用于设置html模板
        new HtmlWebpackPlugin({
            title: "My App",
            template: 'public/index.html',
        }),
        new CleanWebpackPlugin(),
        // 提取js中的css,并重命名
        new MiniCssExtractPlugin({
            filename: "css/[contenthash:10].css"
        }),
        new VueLoaderPlugin(),
        new SpeedMeasurePlugin(),
    ],
    // 将node_modules里面代码分割出来
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
    // 用webpack serve启动 
    devServer: {
        // 设置开发服务器的启动目录
        contentBase: resolve(__dirname, "dist"),
        compress: true,
        port: 3000,
        open: true,
        hot: true,
        // 让浏览器里面的log变得干净
        clientLogLevel: "none",
        // 除去终端的一些输出内容
        quiet: true
    },
}

相信大家可能会觉得我这里为什么没有配置babel,其实我也纳闷,我尝试过,就算不用的话,甚至可以解析ES10的代码,所以我认为webpack5里应该是已经配置好了,无需我们再去配置。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import less from 'less'
Vue.use(less)
Vue.use(ElementUI);
import "./css/index.less"
// import "./css/base.less"
import "./css/base.css"
import Vue from 'vue'
import App from './app.vue'
import router from "./router"
console.log(222222222);
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

以上是我main.js的配置

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
    mode: 'hash',
    routes: [{
            path: '/',
            redirect: '/login'
        },

        {
            path: '/home',
            name: 'home',
            component: () =>
                import ( /* webpackChunkName: "home" */ "../views/Home.vue"),
        },
        {
            path: '/login',
            name: 'Login',
            component: () =>
                import ( /* webpackChunkName: "login" */ "../views/Login.vue"),
        },

    ]
})

以上是我router.js的配置 这两个我就不过多解释了,这两个跟我们平时用的vue脚手架搭的是一样的。 以上基本就是我目前撸的所有配置了,希望各位大佬们给我指点指点,一起进步。 后续我还会添加一些新的配置进来,逐渐完善。 以下是项目的地址,需要的话大家可以拉下来看看,感谢各位 https://gitee.com/lv_qi_hang_admin/lqh-vue-vli.git

点赞
收藏
评论区
推荐文章
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
1年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Stella981 Stella981
1年前
Angular material mat
IconIconNamematiconcode_add\_comment_addcommenticon<maticonadd\_comment</maticon_attach\_file_attachfileicon<maticonattach\_file</maticon_attach\
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_