webpack+vue,搭建纯净vue项目

红太狼 2022-05-21 03:18 178阅读 0赞

上次发现了vue-cli，发现还是挺好用的，开箱即用，但是对于刚接触这些的同学来说，理解里面的东西还是有点困难的，我这篇博客只讲项目搭建，不会过多的介绍vue

1-环境搭建

npm是基于node.js的，所以我们需要先安装node.js，这个直接去官网下载安装包就行，安装完成之后里面会自带npm

npm是属于国外的一个源，在这里我推荐使用淘宝镜像，淘宝镜像是国内的源，速度会快一点

安装方法：
      * 命令行执行 npm config set registry https://registry.npm.taobao.org 
      * npm info underscore （如果上面配置正确这个命令会有字符串response）
      * 安装完成之后就可以使用 cnpm 进行下载资源了

2-项目构建

1）我们先建一个 vue\_demo 的文件夹

2）打开cmd ,执行cd 新建的文件夹路径, 定位到该文件夹下面

3）执行 cnpm init ,执行之后会让你填一些东西，不停的回车就行，没有什么特别的需求这些东西默认就可以了，完成之后会发现多了一个这样的文件package.json，打开了看一下，里面就是刚才让你填的东西

4）创建一个page文件夹，里面创建一个Test.vue文件，内容如下

<template>
        <div>
            <H1>This Test ...</H1>
        </div>
    </template>
    
    <script>
        export default {
            name: "test"//组件名称
        }
    </script>
    
    <style scoped>
    
    </style>

回到上层，创建一个 App.vue文件，内容如下

<template>
        <test></test>
    </template>
    
    <script>
        import Test from "./page/Test.vue";//引入组件
        export default {
            components: {Test}//引入组件
        }
    </script>
    
    <style scoped>
    
    </style>

现在我们的页面内容算是完成了，现在我们要使用我们的页面

新建一个main.js文件，内容如下

import Vue from 'vue'//引入vue
    import App from './App.vue'//引入页面
    
    new Vue({
        el: '#app',
        render: h => h(App)//页面最开始展示的页面
    })

3-webpack配置

现在关于vue的算是弄完了，准备webpack的配置

创建一个webpack.config.js的文件，内容如下

const {VueLoaderPlugin} = require('vue-loader');
    
    module.exports = {
        entry: {
            index: "./main.js"  //webpack的入口文件，指定将哪个文件进行打包
        },
        module: {
            rules: [{
                test: /\.vue$/,//vue文件加载器
                use: ['vue-loader']
            }, {
                test: /\.js$/,//js文件加载器
                use: ['babel-loader'],
                exclude: /node_modules/
            }, {
                test: /\.less$/,//lsaa文件加载器
                loaders: ["style-loader", "css-loader", "less-loader"]
            }, {
                test: /\.css$/,//css文件加载器
                loaders: ["style-loader", "css-loader"]
            }]
        },
        plugins: [
            // 添加VueLoaderPlugin，以响应vue-loader
            new VueLoaderPlugin()
        ]
    };

写到这里我需要说一下，大家可以看到我的webpack配置文件里面只有入口文件，并没有出口文件，因为我的出口文件写在了其他的地方，我现在是跟进我之前的项目在做练习，当然这并不影响大家的使用，因为我做的是前后台分离的，也就是前台和后台可以说是没有关系的，只要要前台的话可以直接把我项目里面的ui文件夹扣出来修改些一点点配置就可以了，文章最后会有我做的这个项目的GitHub的代码，想跟进我的项目可以看我发的博客

现在来看看我其他的配置文件，现在新建两个文件，webpack.build.config.js    webpack.dev.config.js

**webpack.build.config.js**=>主要用于生产模式，将项目直接打包压缩，配置如下

**webpack.dev.config.js**=>主要用于开发模式，另起服务器，单独挂起页面，实现热加载功能，配置如下

现在新建一个index.html，也就是我们的模板文件，看到title里面的那一段了吧，这个就是使用HtmlWebpackPlugin里面的配置的title作为title

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
    <div id="app"></div>
    </body>
    </html>

4-启动项目

现在我们把这些配置文件配好了该怎么使用呢？

还记得最开始生成的package.json文件吧，我们现在开始修改它，看到scripts了吧，在里面加上两句，现在来解读这两句的意思

**build**=> wepack --config webpack.build.config.js --mode producton

wepack ：接触wepack的都会看到这个命令，就是打包命令

--config ：配置指定引用那个配置文件，默认引用webpack.config.js 文件

--mode: 有两个配置，一个开发配置，一个生产配置，production就是生产配置，development就是开发配置

**dev**=> webpack-dev-server --hot --config webpack.dev.config.js --mode development

webpack-dev-server: 启动webpackServer服务

--hot: 启用热加载

我们配置这个有什么用呢？其实不配置也是可以的，我们需要做这些事的时候就直接把定义在里面的东西直接在cmd中执行，但是这么长一个一个的敲出来很累啊，所以定义好了就可以直接npm run build  /   npm run dev   就可以代替我们执行里面的东西

好了我们现在开始执行一把，可以看到报错了，说找不到这个模块 webpack-merge，这是因为我们没有下载这个模块，遇到这样的问题，我们直接cnpm/npm instal \[缺少的模块名\] --save

**注**：npm、cnpm任选一个，没有装淘宝镜像的只能使用npm

![70][]

5-加载模块

其实我们这个项目缺少很多的模块，为什么我之前不全部给加进去呢？因为第一遇到错误解决问题会加深自己的印象，第二遇到类似的问题下次可以自己一下解决，废话不多说，我们需要哪些模块呢？

其实我们在webpack的配置中就可以看到，上面的webpac-merge不正是我们之前配置中写的一段有么

![70 1][]

看看，确实是有，而且下面还有一个html-webpak-plugin，没错，这个也是我们所需要的

![70 2][]

还有这些都是我们需要的，这么多我们一个一个的敲也太慢了吧，我们可以这样

npm install \[模块名\] \[模块名\] --save

多个模块中间用空格连起来就可以一次下载多个依赖包了，这里大家就自己敲了，毕竟也是复制粘贴，不想敲的话可以把我的项目下下来，然后直接npm install就完了

我们把上面的弄完其实还有一些包，因为我们是基于vue的，所以还会有关于vue的包

npm install vue vue-template-compiler --save

我们还需要一些webpack的依赖

npm install webpack webpack-cli webpack-dev-server --save

好了，大概就这么多，当我们下载完成之后会发现package.json被改了，而且还多了一个node\_modules这样文件夹，对的，就是我们安装了那些依赖都在这里可以看到，其实也可以直接在这里面写上这些依赖然名和版本号，然后npm install 就可以全部下载下来啦

最后附上我的package.json

{
      "name": "vue_demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.build.config.js --mode production",
        "dev": "webpack-dev-server --hot --config webpack.dev.config.js --mode development"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "css-loader": "^0.28.11",
        "html-webpack-plugin": "^3.2.0",
        "less-loader": "^4.1.0",
        "style-loader": "^0.21.0",
        "vue": "^2.5.16",
        "vue-loader": "^15.2.4",
        "vue-template-compiler": "^2.5.16",
        "webpack": "^4.13.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.4",
        "webpack-merge": "^4.1.3"
      }
    }

好了，现在我们开始打包文件吧 npm run build

![70 3][]

执行到最后没有错误就算大工告成了，看看输出目录是不是多了两个文件，一个index.html ，一个index.js,现在直接在浏览器看index.html，如果和我做的是一样的，那么就应该是下面的这种结果

![70 4][]

现在再来执行npm run dev,尝尝热加载的好处，它会自动打开你的浏览器，然后看到的结果应该是和上面一样的，现在我们修改一下Test.vue或者App.vue里面的内容都可以，看看页面会不会实时的根据你的改动而变化呢，是不是很有趣

项目地址：[GitHub传送门][GitHub]

转载请标明出处：https://blog.csdn.net/qq\_33733799/article/details/80846459

[70]: /images/20220521/8b1ef170a33c4773b9ec9d9309cf139c.png
[70 1]: /images/20220521/7428a071aa8c448ca89a67c5877eb1d9.png
[70 2]: /images/20220521/4c63319b0b1a4ac3a763cfea048237cb.png
[70 3]: /images/20220521/7bfcd0838a284adaabea86ec6cdaa9a8.png
[70 4]: /images/20220521/f8fecf59ad224fbfb3903cd1c739ce12.png
[GitHub]: https://github.com/XiaoHang233/Practice.git