webpack搭建vue2项目

文章目录

一、环境安装

首先你需要node环境

创建一个文件夹

然后cmd运行

csharp 复制代码
npm init -y

最后package.json文件

csharp 复制代码
{
  "name": "demo5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack 打包工具

sh 复制代码
npm i webpack webpack-cli -D

热更新和服务器

sh 复制代码
npm i webpack-dev-server -D

css加载器

sh 复制代码
npm i css-loader -D

html插件

sh 复制代码
npm i html-webpack-plugin -D

接下来就是vue2环境

sh 复制代码
npm i vue@2

vue加载器以及vue的模板编译,vue-template-compiler版本需要和vue的版本一致,你下载的vue版本在package可以查看。vue-loader的版本不能太高,不然没法运行

sh 复制代码
npm i vue-loader@15.11.1 vue-template-compiler@2.7.16 -D

二、目录结构

在本目录创建相应的目录结构

csharp 复制代码
|- src
|--- public
|----- index.html 
|--- main.js
|--- App.vue
|--- webpack.config.js

src/public/index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

src/main.js

csharp 复制代码
import Vue from 'vue'
import App from "./App.vue";

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

src/App.vue

html 复制代码
<template>
  <div class="app">{{ msg }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "hello vue2",
    };
  },
};
</script>

<style scoped>
    .app {
        color: aqua;
    }
</style>

webpack.config.js

csharp 复制代码
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
const path = require("path");

module.exports = {
  mode: "development", // 开发模式
  entry: path.resolve(__dirname,"./src/main.js"),
  module: {
    rules: [
      // 解析导入的css文件
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
        exclude: /node_modules/,
      },
      //   解析vue文件
      {
        test: /\.vue$/,
        loader: "vue-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/public/index.html"), //模板文件
    }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    host: "localhost",
    port: 8888,
    open: true, // 自动打开一个浏览器窗口
    hot: false, // 不适用热重启,似乎会和vue-loader冲突
  },
};

最后是package.json文件

csharp 复制代码
{
...
  "scripts": {
    "start": "webpack serve --progress --mode=development"
  },
  ....
}

cmd运行

sh 复制代码
npm run start

此时就能实时开发vue2程序了。

三、开发与生产环境分离

如果你想上线,那么需要更改webpack.config.js文件,于是我们分出两套配置文件,一套开发环境的webpack配置文件,另一套生产环境的,也就是直接build出源代码,我们从中抽离出共有的配置再写入一个文件

于是我们需要三个文件

  • webpack.common.js
  • webpack.dev.js
  • webpack.prod.js

这三个文件放在根目录的build文件夹中。

还需要webpack-merge工具来对配置文件进行合并

sh 复制代码
npm i webpack-merge -D

./build/webpack.common.js

js 复制代码
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
const path = require("path");

module.exports = {
  entry: path.resolve(__dirname,"../src/main.js"),    // 注意,此时的src目录在 ../ 路径是按配置文件来算
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
        exclude: /node_modules/,
      },
      //   解析vue文件
      {
        test: /\.vue$/,
        loader: "vue-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../src/public/index.html"), //注意,此时的src目录在 ../
    }),
    new VueLoaderPlugin(),
  ],
};

开发环境配置文件

./build/webpack.dev.js

js 复制代码
const { merge } = require("webpack-merge");
const config = require("./webpack.common.js");

const devConfig = {
  mode: "development",   // 开发环境
  devServer: {
    host: "localhost",
    port: 8888,
    open: true, // 自动打开一个浏览器窗口
    hot: false, // 不适用热重启,似乎会和vue-loader冲突
  },
};

module.exports = merge(config,devConfig);

生产环境
./build/webpack.prod.js

csharp 复制代码
const config = require("./webpack.common.js")
const {merge} = require("webpack-merge")

const prodConfig ={
    mode: "production",
}

module.exports = merge(prodConfig, config)

package.json

json 复制代码
{
....
  "scripts": {
    "dev": "webpack serve --config ./build/webpack.dev.js --progress --mode=development",
    "build": "webpack --config ./build/webpack.prod.js --progress --mode=production"
  },
  ...
  }

cmd执行 npm run serve 进入开发模式,可以变写代码边实时观察网页变化。
npm run build 编译源代码,然后在dist文件夹直接双击index.html就能看到你编写的网页了,此时可以将该项目部署上线了。

四、最后

完成后就可以开发vue2程序了。这只是最简单的一个示例

其中还可以加入更多功能,如css压缩,css分离,babel兼容处理等。

其实这就是一个学习webpack的过程,使用官方的cli肯定更方便的。

后面会出如何使用vue进行多页面开发,众所周知,vue主要就是单页面开发,但是有时候我们就是需要多个页面来互相访问资源。

相关推荐
晴殇i2 分钟前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____3 分钟前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �4 分钟前
前端转Java,从0到1学习教程
java·前端·学习
小奋斗21 分钟前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军22 分钟前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_4050233724 分钟前
webpack 学习
前端·学习·webpack
云中雾丽24 分钟前
flutter中 Future 详细介绍
前端
求知呀24 分钟前
服务器状态管理 Vue Query
前端
在下Z.38 分钟前
前端基础--css(1)
前端·css
常在士心42 分钟前
Flutter项目支持鸿蒙环境
前端