webpack构建Vue脚手架

Posted 2022-10-20 JackySei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack构建Vue脚手架相关的知识，希望对你有一定的参考价值。

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是对项目文件的监听，监听到文件修改之后，会重新编译打包。

以上是关于webpack构建Vue脚手架的主要内容，如果未能解决你的问题，请参考以下文章

webpack构建Vue脚手架

Vue-Router路由Vue-CLI脚手架和模块化开发之 Vue-CLI 2.x脚手架工具基于webpack simple模板与基于webpack模板构建项目