vue+webpack 写给自己的小总结

前言
        在了解webpack之后，自己尝试了一下对vue浅显的剖析，从零创建vue项目，效果呢自然是可以正常的使用vue组件及vue-router以及vuex。不过有些地方确实不容易弄明白，比如跟着网上视频上讲的写，确实没弄出来，莫名其妙又摸不着头脑，唉~~~

简单概况

        简单来说，跑vue项目最主要是vue-loader了，不仅可以解析vue文件，还可以做许多事情，比如。。。。（vue-loader官网是如何解释的），接着需要用到VueLoaderPlugin插件等，接下来会写到如何从零开始创建vue项目的。

实战

        我们新建一个文件夹，用编译器打开（小编用的是webstorm），在终端对项目初始化npm init创建package.json，然后安装webpack以及webpack cli，对没错，就是上一章的webpack最基础的操作。
        先把我们需要准备的内容下载下来

//生成package.json文件
npm init -y //-y ：yes 目的不用敲回车，
//安装webpack 和webpack cli
npm i webpack webpack cli -D 
//-D 局部安装 安装到development环境里，后面一定要分清楚开发环境和生产环境，-g是全局安装
//-g 全局安装是指安装到你的用户目录下 \Users\用户名\AppData\Roaming\ 
//-D 局部安装 安装包信息写入package.json文件的devDependencies
//指安装到你的项目指定目录下 项目node_modules文件的指定目录

        安装vue的一些主要的东西（vue vue-loader vue-template-compiler ）以及辅助loader

npm i vue vue-loader vue-template-compiler 

//webpack 4.x || 5.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack

//--save-dev 等价于 -D
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev postcss-loader postcss autoprefixer//不要忘记呀
npm install --save-dev url-loader//需要file-loader
npm install --save-dev file-loader

//Webpack 5
npm i --save-dev html-webpack-plugin@next

//Webpack 4
npm i --save-dev html-webpack-plugin

        在package中，我们可以看到具体的安装包已经被写入，自己去package.json里头看去。

目录结构：

• node_modules
• src
  • assets
    • imgs
      • background.png
  • views
    • home.vue
    • index.vue
  • app.vue
  • main.js
• package.json
• package-lock.json
• webpack.config.js
  暂时就这些目录！！！！！

        目录创建好以后，先来写webpack的入口文件，main.js

//main.js
import Vue from 'vue' //引入vue
import App from './app.vue' //引入app，注意，一定要加后缀

const root = document.body.appendChild(document.createElement('div'))

new Vue({
    render : (h)=>h(App)
}).$mount(root)//创建vue实例然后挂载到div上

        在main.js中我们用到了app.vue,现在要在app.vue简单的写点内容

<!--app.vue-->
<template>
    <div>
        {{text}}
    </div>
</template>
<script>
    export default {
        name:'app',
        data(){
            return{
                text : 'this is App'
            }
        }
    }
</script>
<style></style>

        接下来搞一搞webpack的东西

//webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "js/[name]-[hash:8].js"
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "autoprefixer",
                                        {
                                            "browsers": [
                                                "defaults",
                                                "not ie < 11",
                                                "last 2 versions",
                                                "> 1%",
                                                "iOS 7",
                                                "last 3 iOS versions"
                                            ]
                                        },
                                    ],
                                ],
                            },
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    limit:'12288'
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ]
}

        VueLoaderPlugin官网说的很明白

        接下来直接在终端输入webpack也好，或者在package.json配置也可

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
//终端输入npm run build

        过程中如果出现错误，也许是你的webpack和htmlwebpackplugin插件版本的问题，此时你看一下是否对应上述所说的重新安装，或者手动调整版本号也行

npm uninstall xxx

        webpack4的成功日志，学习的时候用的webpack5，打包后发现日志并没有webpack4详细，害~~

D:\webpackManage\test7>npm run build
[webpack-cli] Compilation finished
Hash: bd01c61d483bdfcecad1
Version: webpack 4.44.2
Time: 3514ms
Built at: 2020-12-25 10:06:47
              Asset       Size  Chunks                         Chunk Names
         index.html  212 bytes          [emitted]
js/main-bd01c61d.js   69.9 KiB       0  [emitted] [immutable]  main
Entrypoint main = js/main-bd01c61d.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]
[1] ./node_modules/vue/dist/vue.runtime.esm.js 222 KiB {0} [built]
[2] ./node_modules/timers-browserify/main.js 1.97 KiB {0} [built]
[3] ./node_modules/setimmediate/setImmediate.js 6.32 KiB {0} [built]
[4] ./node_modules/process/browser.js 5.29 KiB {0} [built]
[5] ./src/main.js + 6 modules 4.85 KiB {0} [built]
    | ./src/main.js 201 bytes [built]
    | ./src/app.vue 1.04 KiB [built]
    | ./src/app.vue?vue&type=template&id=5ef48958& 195 bytes [built]
    | ./src/app.vue?vue&type=script&lang=js& 348 bytes [built]
    | ./node_modules/vue-loader/lib/runtime/componentNormalizer.js 2.71 KiB [built]
    | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue
&type=template&id=5ef48958& 258 bytes [built]
    | ./node_modules/babel-loader/lib??ref--1!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js& 128 bytes [bui
lt]
Child HtmlWebpackCompiler:
                          Asset      Size  Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  4.02 KiB       0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 436 bytes {0} [built]

        到此为止，仅仅是利用webpack生产模式打包，接下来我们要配置开发模式进行打包。效果自然是在浏览器地址栏上输入host:port即可访问。

开发模式

        在开发模式中，我们要对webpack进行修改，告诉他此时此刻是开发模式。要用到一个非常重要的server

npm i webpack-dev-server -D

        不管是学习还是在练习过程中，都遇到了很麻烦的一件事——webpack、webpack-cli和webpack-dev-server这几个的版本问题，现在提一下我所使用的版本。

"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

        同样在package.json中我们对其进行修改，需要注意的是一定要加&&，否则会因为多个空格导致无法判断生产模式还是开发模式。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //设置生产模式
    "build": " set NODE_ENV=production&& webpack --config webpack.config.js",
    //设置开发模式
    "dev": " set NODE_ENV=development&& webpack-dev-server --config webpack.config.js"
  },

        回到我们的webpack.config.js中，对其进行判断dev or pro

const isDev = process.env.NODE_ENV === 'development'
//简单理解一下这句话
//在node中，有全局变量process表示的是当前的node进程。
//process.env包含着关于系统环境的信息。
//但是process.env中并不存在NODE_ENV这个东西。
//NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。
const config={
	……
	mode:isDev?'development':'production'
}

if(isDev){
	config.devServer={
	 	port:8000,
        host:'localhost',
        hot:true,//热加载
        open:true//启动时打开网页
	}
}

module.exports=config

        devServer可查看官网，运行一下试试

D:\webpackManage\test7>npm run dev

> test7@1.0.0 dev D:\项目\webpackManage\test7
>  set NODE_ENV=development&& webpack-dev-server --config webpack.config.js

i ｢wds｣: Project is running at http://localhost:8000/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\项目\webpackManage\test7
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: 0043a8deba1ab0c79e36
Version: webpack 4.44.2
Time: 5056ms
Built at: 2020-12-25 11:24:21
              Asset       Size  Chunks                         Chunk Names
         index.html  237 bytes          [emitted]
js/main-0043a8de.js    662 KiB    main  [emitted] [immutable]  main
Entrypoint main = js/main-0043a8de.js
[0] multi (webpack)-dev-server/client?http://localhost:8000 (webpack)/hot/dev-server.js ./src/main.js 52 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/vue/dist/vue.runtime.esm.js] 222 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8000] (webpack)-dev-server/client?http://localhost:8000 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./src/main.js] 201 bytes {main} [built]
    + 32 hidden modules
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 436 bytes {HtmlWebpackPlugin_0} [built]
i ｢wdm｣: Compiled successfully.

VUE-ROUTER

        接下来复习一下vue-router该如何使用吧。先去vue-router官网上转一圈。[若干时间后~~~~]，看完了就先安装一下vue-router吧。

npm i vue-router

        我们需要配置router.js，所以再src下新建router.js文件，配置如下。

//router.js
//注意区分routes和router
import Vue from 'vue'
import VueRouter from "vue-router"

Vue.use(VueRouter)

const routes = [
    {
        path:'/index',
        name:'index',
        component:()=>import('./views/index.vue')
    },
    {
        path: '/home',
        name: 'home',
        component:()=>import('./views/home.vue')
    }
]

export default new VueRouter({
    routes
})

        然后到main.js里导入

import Vue from 'vue'
import App from './app.vue'
import router from "./router.js";

const root = document.body.appendChild(document.createElement('div'))

new Vue({
    router,
    render : (h)=>h(App)
}).$mount(root)

        修改一下app.vue

<!--app.vue-->
<template>
    <div class="app">
        <div class="link">
            <router-link to="/index">index|</router-link>
        </div>
        <div class="link">
            <router-link to="/home">home</router-link>
        </div>
        <br/>
            <router-view class="view"></router-view>
    </div>
</template>

<script>
    export default {
        name:'app',
        data(){
            return{
                // text : 'this is App'
            }
        }
    }
</script>

<style>
    .app,body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100vh;
        background-image: url("./assets/imgs/background.png");
        background-size: cover;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

    }
    .link{
        font-size: 4vw;
        height: 5vw;
    }
    .view{
        width: 100vw;
    }
</style>

        接着在index.vue和home.vue里添加些内容

<template>
    <div>
        <h1 v-text="title"></h1>
    </div>
</template>
<script>
    export default {
        name:'index',
        data(){
            return{
                title:'This is Index.vue'
            }
        }
    }
</script>
<style>
    div{
        text-align: center;
    }
    h1{
        color: white;
    }
</style>

VUEX

        vuex和vue-router配置内容差别不是很大。

• src
  • store
    • modules
      • home.js
    • index.js

//vuex-index.js
import Vue from 'vue'
import Vuex from 'vuex'
import home from './modules/home.js'

Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        home
    }
})

home.js
const state = {
    data:''
}

const getters={
    getData(state){
        return state.data
    }
}

const mutations={
    setData(state,data){
        state.data=data
    }
}

const actions = {
    changeData({commit},data){
        commit('setData',data)
    }
}

export default {
    namespaced :true,
    state,getters,mutations,actions
}

//main.js
import Vue from 'vue'
import App from './app.vue'
import router from "./router.js";
import store from './store/index'

const root = document.body.appendChild(document.createElement('div'))

new Vue({
    router,
    store,
    render : (h)=>h(App)
}).$mount(root)

        修改home.vue和index.vue

<!--index.vue-->
<template>
    <div>
        <h1 v-text="title"></h1>
        <input type="text" v-model="text" placeholder="输入内容">
        <button @click="commit">提交</button>
    </div>
</template>
<script>
    import {mapActions} from 'vuex'
    export default {
        name:'index',
        data(){
            return{
                title:'This is Index.vue',
                text:''
            }
        },
        methods:{
            ...mapActions('home',['changeData']),
            commit(){
                this.changeData(this.text)
            }
        }
    }
</script>
<style>
    div{
        text-align: center;
    }
    h1{
        color: white;
    }
</style>

<!--home.vue-->
<template>
    <div>
        <h1 v-text="title"></h1>
        <h1>{{$store.state.home.data}}</h1>
    </div>
</template>
<script>
export default {
    name:'home',
    data(){
        return{
            title:'This is Home.vue',

        }
    },
    methods:{

    }
}
</script>
<style>
    div{
        text-align: center;
    }
    h1{
        color: white;
    }
</style>

结束

        文章到此为止就结束了，另外附上我的package.json，方便以后查看版本问题哈哈嗝儿~~

//package.json
{
  "name": "test7",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": " set NODE_ENV=production&& webpack --config webpack.config.js",
    "dev": " set NODE_ENV=development&& webpack-dev-server --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^2.0.0",
    "postcss-loader": "^4.1.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-router": "^3.4.9",
    "vue-template-compiler": "^2.6.12",
    "vuex": "^3.6.0"
  }
}

//webpack.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const isDev = process.env.NODE_ENV === 'development'

const config={
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "js/[name]-[hash:8].js"
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "autoprefixer",
                                        {
                                            "browsers": [
                                                "defaults",
                                                "not ie < 11",
                                                "last 2 versions",
                                                "> 1%",
                                                "iOS 7",
                                                "last 3 iOS versions"
                                            ]
                                        },
                                    ],
                                ],
                            },
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    limit:'12288'
                }
            }
        ]
    },
    mode: isDev?'development':'production',
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin()
    ]
}

if(isDev){
    config.devServer={
        port:8000,
        host:'localhost',
        hot:true,
        open:true
    }
}

module.exports = config