webpack打包Vue项目

准备工作

1、新建一个名为 webpack 项目,新建 webpack.config.js 和 package.json文件
2、在package.json文件中输入{ }保存

3、添加 webpack 库
打开终端 在终端中输入 npm install webpack webpack-cli -D 命令

安装成功后 在package.json文件中会看到一下内容

4、配置打包命令和启动服务器的命令
在该文件夹下添加如下命令

安装 babel 相关库

1、安装 babel 相关库
在终端页面输入一下命令

npm install babel-loader @babel/core @babel/preset-env -D

npm install core-js@3

安装成功后 在package.json文件中会看到一下内容

2、在 webpack.config.js中 配置 js 相关设置

html 相关设置

1、安装相关库
npm install html-webpack-plugin -D

2、创建 public 目录 在其目录下 新建index.html

3、配置 模板 插件
在webpack.config.js里配置以下内容

搭建 Vue项目

1、安装 Vue 相关库

npm install vue vue-template-compiler vue-loader -D

2、在 index.html 中 添加

DOM对象

3、在 项目下 新建 src 目录 ，在src目录下新建 App.vue 文件 并 输入以下内容

4、在src目录下新建 main.js 文件 并创建Vue实例

5、在 webpack.config.js中 配置 vue-loader 相关设置

配置 css-loader

1、安装相关库

npm install style-loader css-loader less-loader less -D

2、在 webpack.config.js中 配置 css-loader 相关设置

配置 file-loader

1、安装 相关库

npm install file-loader -D

2、在 webpack.config.js中 配置 file-loader 相关设置
在文件最上方添加
const path = require(“path”);
并添加图片内相关内容

搭建开发服务器

1、安装相关库

npm install webpack-dev-server@4.0.0-beta.2 -D

2、在 webpack.config.js 配置文件中，配置开发服务器

项目测试

1、在App.vue文件里 添加测试数据

2、在终端页面输入 npm run serve 命令看到以下内容，则代表服务器配置成功

3、在该页面往上翻 找到以下内容，并复制Loopback的内容

4、把复制的地址在浏览器中打开，会看到以下内容