webpack+vue,搭建纯净vue项目

上次发现了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=>主要用于生产模式，将项目直接打包压缩，配置如下

const merge = require('webpack-merge');//用于合并两个配置文件的工具
const common = require('./webpack.config.js');//加载之前定义的配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin');//HTTPWebpackPlugin这个会经常用到，是可以将你所有配置好的东西打包成一个html文件，功能很强大，我在这简单介绍一下怎么用，具体的大家可以自行了解
module.exports = merge(common, {
    output: {
        path: __dirname + "/../src/main/webapp/assets/dist/",//打包后输出的文件地址，我这里配置的地址是我项目中SpringMVC存放页面的地方，如果你只需要前台请自行修改这里的配置，其实不修改也行，它会自动创建这个地址的，__dirname是webpack中的全局关键字，存放的项目的根目录的绝对路径
        filename: "[name].js"//打包后输出的文件名，[name]就是使用入口文件的key做名称
    },
    plugins: [
        new HtmlWebpackPlugin({//要使用就必须得new出来
            title: '首页',//生成的html文件的title
            template: 'index.html',//生成的html文件可以使用定义好的模板，生成好的html文件会继承模板的所有内容，同时如果模板里面定义好了title，上面的title配置是不会生效的
            filename: 'index.html',//生成的title文件的名称
            hash:true,//是否产生hash值
            chunks: ["index"],//加载那些js文件，这个js文件就是输出的js文件名
            chunksSortMode:'manual'//排序方式
        })
    ],
    devtool: 'inline-source-map'//开启控制台输出错误信息具体在哪行
});

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

const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.config.js');
module.exports = merge(common, {
    output: {
        path:  "/",//热加载模式不能指定输出的文件地址，它输出的文件会缓存放在这里，你是看不到的，这里必须这样配置
        filename: "[name].js"
    },
    devServer: {//webpack-server的配置
        host: 'localhost',//服务显示的地址localhsot  127.0.0.1  本机的ip地址都可以
        port: 8090,//服务的端口号
        open: true,//服务启动是否打开浏览器，打开的都是默认的浏览器
        contentBase: './',//服务器加载的目录，会自动找到该目录下的index.html文件进行页面展示
        inline: true,//页面刷新方式
        proxy: {//配置代理，因为我是前后台分离的，所以在调试的时候需要这个代理的配置才能向后台取数据
            '/': {//代理所有的url请求
                target: 'http://localhost:9876'//代理的地址，我的tomcat配置的端口是9876，如果你们配的不是那就需要修改这里了
            }
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '首页',
            template: 'index.html',
            filename: 'index.html',
            hash:true,
            chunks: ["index"],
            chunksSortMode:'manual'
        })
    ],
    devtool: 'inline-source-map'
});

现在新建一个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: 启用热加载

{
  "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"
}

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

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

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

5-加载模块

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

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

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

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

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

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

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

项目地址：GitHub传送门

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

webpack+vue,搭建纯净vue项目

猜你喜欢