webpack配置项目—Vue项目

最新推荐文章于 2024-06-07 17:03:35 发布

sq-web

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量370

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/VRSUQ/article/details/107296435

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

分享一个最近测试搭建的webpack的vue项目，完成最基本的功能配置。

一、搭建基本骨架
npm init 初始化
npm install webpack webpack-cli --save-dev 安装基本组件
根目录创建文件：index.html ，src/main.js ，src/app.vue ，webpack.config.base.js，webpack.config.dev.js，webpack.config.prod.js
最终基本目录如下：
在这里插入图片描述
二、各文件内容及作用
1、src/app.vue vue测试页面，需要后面配置的vue-loader与vue-template-compiler识别。

<template>
  <div>你好{{ data }}</div>
</template>
<script>
export default {
  data() {
    return {
      data: 'Vue'
    }
  }
}
</script>
<style scoped></style>

2、src/main.js入口文件，引入vue，并进行实例化。

import Vue from 'vue'
import App from './app.vue'
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

3、index.html挂载的HTML文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>system-pc</title>
  </head>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #f8f8f9;
    }
  </style>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4、package.json文件，这个是自动生成的，主要注意里面的依赖文件及注释的位置，json文件不能注释，这里只是为了说明。

{
  "name": "webpackvuetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode=development --progress --config webpack.config.dev.js",   // 用devserver启动服务，实现监听，调用的配置文件是webpack.config.dev.js
    "build": "webpack --mode=production --config webpack.config.prod.js"  //  build命令，配置文件是 webpack.config.prod.js
  },
  "author": "sq",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",  // 生成html文件的插件
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",// 用来实现监听的插件
    "webpack-merge": "^4.2.2"  // 用来合并webpack配置的插件
  }
}

5、最后就是三个webpack配置文件，webpack.config.base.js，webpack.config.dev.js，webpack.config.prod.js，在这里是为了将开发环境与生产环境的配置分开，所以是三个文件。
5.1webpack.config.base.js 公共配置文件

const path = require('path')
const config = {
  entry: {
    app: './src/main.js' // 入口
  },
  // 出口配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js' //根据main.js中new Vue传参的方式，修改main.js中引入的vue包的类型，因为vue官方的的包分很多种，且实例化的时候传参会有区别
    }
  },
  module: {
    rules: [
      // 处理vue文件的loader
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}
module.exports = config

5.2webpack.config.dev.js开发环境的配置

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')

const config = merge(baseConfig, {
  // 监听服务的配置
  devServer: {
    port: '8000',
    host: 'localhost',
    hot: true
  },
  plugins: [
    new VueLoaderPlugin(),
    // 生成hrml文件的插件的配置，比较重要，需要用index.html文件作为模板去替换生成的html文件，实现挂载，不然会提示找不到挂载点
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
})
module.exports = config

5.3webpack.config.prod.js生产环境配置，这里面目前每加什么配置文件，可以根据需求添加一些生产环境需要的配置，例如代码分离、压缩等各种后期处理的配置。

const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.config.base");

const config = merge(baseConfig, {
  plugins: [new VueLoaderPlugin(), new HtmlWebpackPlugin()],
});
module.exports = config;

三、最后，这个项目没有配置太多的东西，只是为了查看一个最基本vue项目的脉络和组件，如有错误还请不吝指出。若想要更多研究，还请自行查阅，最后希望大家共同进步。

sq-web

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack配置项目—Vue项目

分享一个最近测试搭建的webpack的vue项目，完成最基本的功能配置。一、搭建基本骨架npm init 初始化npm install webpack webpack-cli --save-dev 安装基本组件根目录创建文件：index.html ，src/main.js ，src/app.vue ，webpack.config.base.js，webpack.config.dev.js，webpack.config.prod.js最终基本目录如下：二、各文件内容及作用1、src
复制链接

扫一扫

专栏目录