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主要就是单页面开发，但是有时候我们就是需要多个页面来互相访问资源。