webpack配置vue服务器

最新推荐文章于 2024-05-07 09:41:56 发布

Poisn_wol

最新推荐文章于 2024-05-07 09:41:56 发布

阅读量275

点赞数

分类专栏：个人笔记文章标签： webpack 服务器 vue

本文链接：https://blog.csdn.net/Poisn_wol/article/details/83013716

版权

个人笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何配置Webpack来搭建Vue项目的服务器环境。首先，通过npm初始化项目并安装必要的Webpack、webpack-cli和webpack-dev-server。接着，为了支持ES6，安装了babel及其相关依赖。在创建webpack.config.js文件后，遇到并解决了Babel版本问题。然后，创建index.html并启动Webpack服务器。在项目中引入Vue，并调整Webpack配置以解决Vue导入问题。最后，实现了热更新，无需刷新浏览器即可查看Vue应用的变化。

摘要由CSDN通过智能技术生成

一，配置webpack

1）新建一个工程文件夹，cmd进入该文件夹 npm init -y
2）npm install webpack webpack-cli webpack-dev-server --save-dev
3）想要支持ES6，需要安装babel依赖。
babel是一个js编译平台：作用让浏览器支持下一代JS(ES6，ES7...)代码，支持使用基于js进行语言拓展，如React的jsx
npm install --save-dev babel-loader babel-core babel-preset-es2015
npm install --save-dev babel-loader babel-core:核心包 babel-preset-es2015
4）创建webpack.config.js
5）执行：npx webpack
报错：ERROR in ./js/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

npm i babel-loader@7.1.5 -D

6）新建index.html

7）启动webpack服务器
3.6.1：在webpack.config.js

8）node_modules\.bin\webpack-dev-server
成功后，在浏览器中访问http://localhost:8080
这种方法，文件路径不好操作3.6.3:
修改package.json将"main":"index.js"修改为"webpack.config.js"
在scripts下添加一句:"start:dev": "webpack-dev-server"

Ctrl+c 退出服务器
cmd执行 npm run start:dev 进入服务器

下载vue
npm install --save vue

修改 index.js

import Vue from "vue";

new Vue({
el: "#app",
data: {
a: 1
}
})

打开 index.html

在 <body> 下加入

npx webpack

npm run start:dev

测试 http://localhost:8080/

无法获取 a 的值因为需要配置webpack

https://cn.vuejs.org/v2/guide/installation.html

就是点击左侧安装

找到以下代码位置

webpack

module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}

打开 webpack.config.js

加入

,
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}

npx webpack

npm run start:dev

http://localhost:8080/

打开 index.js

将 a：1

改为 a:2

无需刷新 http://localhost:8080/ 查看值是否发生改变为 2

webpack.config.js文件配置

// 引入node的path模块
const path = require('path');
// 指定返回接口的集合
module.exports = {
    mode:"production",
    // production 生产模式
    // development 开发模式
    // 打包的人口文件
    entry:"./js/index.js",
    // 打包的出口文件地址和文件名
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"main.js",
        publicPath:'/public/'
        // webpack-dev-serber提供的虚拟文件夹(在内存和硬盘里都找不到)
        // 1，内存速度更快，提升编译速度
        // 2，保护硬盘
    },
    module:{
        // 模块规则
        rules:[
            {
                test:/\.js?$/,
                exclude:[
                    path.resolve(__dirname,'node_modules')
                ],
                loader:"babel-loader",
                options:{
                    presets:['es2015']
                }
            }
        ]
    },
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    }
}
// 创建一个js文件夹
// 在js文件夹中创建index.js，

到这 webpack基本配置好了，要配置less和scss，还需下载相应的模块。