webpack构建Vue脚手架

最新推荐文章于 2024-04-26 16:47:03 发布

JackySei

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量570

点赞数 2

分类专栏：前端文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/weixin_44969233/article/details/125760317

版权

前端专栏收录该内容

4 篇文章 9 订阅

订阅专栏

webpack构建Vue脚手架

创建项目，安装依赖

新建一个文件夹，在这个文件夹下安装依赖。

基于 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.html

写页面需要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>
    <script src="bundle.js"></script>
</body>
</html>

这个id=app的div就是等会放vue组件的地方，这里先把它写在这。

这个bundle.js是最后打包生成的js，在这里引用，我们也还是先把它写在这。

创建入口文件main.js

打包需要有一个入口文件

创建main.js

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

createApp(App).mount('#app');

可以发现这里的App组件还没有创建。从代码中可以看出这里的App组件就是添加到id为app的那个div中的内容。下一步创建它。

创建App.vue

随便写一些内容

<template>
    <div>
        <div>Hello World</div>
        <button>BTN1</button>
        <button>BTN2</button>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

到这一步代码相关的就已经完成，接下来需要对webpack进行修改。

Webpack配置

创建webpack.config.js文件，进行配置的编辑。

注意，到这一步的时候，为了规范，将项目目录格式修改成下图所示

进入webpack.config.js配置文件中编写

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

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {test:/\.vue$/,use:'vue-loader'},
            {test:/\.s[ca]ss$/,use:['style-loader','css-loader','scss-loader']},
            {test:/.m?js$/,use:{
                loader:'babel-loader',
                options:{
                    presets:['@babel/preset-env'],
                }
            }},
            // {test:/\.(png|jpg?g|gif|svg|webp)$/,use:{loader:'file-loader',options:{esModule:false}}}
            {test:/\.(png|jpg?g|gif|svg|webp)$/,type:'assets/resource'}
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
    ]
}

其中entry为入口文件

output为输出文件，在这其中可以设置输出的路径和文件名称，

剩下的就是一些打包规则和插件的运用。

比如解析.vue结尾的文件就需要用到刚刚安装的vue-loader，之后的那些也是同理，要让webpack知道解析哪种文件需要用到哪些东西，当需要多个loader时，是用数组保存的，解析时是从右到左，就比如上面对sass结尾的文件，打包时，需要用到三个loader，但实际上webpack使用loader的顺序时scss-loader->css-loader->style-loader。

webpack的配置完成后，就可以进入启动命令相关的配置了。

配置启动命令

进入package.json中

将调试命令修改为

"scripts": {
    "serve": "webpack --mode=development --watch",
    "build": "webpack --mode=production"
},

如果没有的话就新建

其中–mode=development代表是在开发模式下打包的，配置比较简单，是一个能让代码本地调试运行的环境。打包速度较快，毕竟开发时谁也不想因为打包而等太久。

而另一个是生产模式，一旦项目发布要发布到生产环境中给别人使用时，那么就需要对打包后代码的性能，体积都要进行优化，而相对的打包速度也会比开发模式慢，毕竟多做了很多事情

watch是对项目文件的监听，监听到文件修改之后，会重新编译打包。

JackySei

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
webpack构建Vue脚手架

新建一个文件夹，在这个文件夹下安装依赖。基于 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
复制链接

扫一扫