webpack Vue环境配置

webpack Vue环境配置

初始化项目

npm init -y

创建目录

目录解释

• build: 存放配置文件
  • webpack.common.js: 公共配置
  • webpack.dev.js: 开发环境配置
  • webpack.prod.js: 生产环境配置
• dist: 存放打包后的项目文件
• src: 存放源代码文件
  • assets: 页面资源文件（img, css文件, js文件）
  • components: vue公共组件
  • router: vue 路由系统文件
  • store: vuex 文件
  • main.js: 页面入口文件
• index.html: 主页面模板文件
• postcss.config.js:JavaScript转化为css代码

安装基本的loader

整个loader分为几大类

• webpack工具类 - D 安装（项目本地开发依赖）
  • webpack：webpack 核心
  • webpack-cli: 提供相关的webpack指令
  • webpack-dev-server: 开启开发模式，可以启用热更新等技术
  • webpack-merge：可以合并多个webpack的配置
  • clean-webpack-plugin: 每次打包后，情况原来打包的文件
  • html-webpack-plugin: 配置项目的模板HTML文件
• 基本的loader - D 安装（项目本地开发依赖）
  • node-sass: node环境下的sass编辑器
  • sass-loader: 加载scss文件
  • css-loader: 加载css
  • file-loader: 加载各种文件
  • style-loader：配置内联样式
• babel 转移类型 - D 安装（项目本地开发依赖）
  • babel-loader
  • @babel/core
  • @babel/polyfill
  • @babel/prest-env
• 兼容性工具 - D 安装（项目本地开发依赖）
  • postcss-loader: css样式兼容
  • autoprefixer: 上述工具的预处理
  • html-withing-loader: 当模板文件有图片的时候，也可以正常的挪到指定的目录
• vue 相关 - S 安装（生产环境依赖）
  • vue: 核心框架
  • vue-loader： .vue 文件的加载器
  • vue-router: vue 的路由模块
  • vue-template-compiler: vue的模板编译器
  • vuex: vuex

npm i webpack-dev-server -D 把这个工具安装到项目本地开发依赖

注意运行 npm run dev遇到的问题：Error: Cannot find module 'webpack-cli/bin/config-yargs'

原因是 webpack5.x的版本与webpack-dev-server3.x 的版本不兼容。 需要降级

具体配置

webpack.common.js

let path = require('path') // 为后面的文件路径相关的业务做准备
let htmlWebpackPlugin = require('html-webpack-plugin')
let VueLoaderPlugin = require('vue-loader/lib/plugin') // 导入vue-loader 插件

// 配置基本打包信息，如入口，出口， 项目基本文件的加载器插件
module.exports = {
  entry: {
    // 用path模块resolve功能把当前webpack配置文件所在目录，与传进去的目录进行整合一个绝对路径
    // 打包之后文件名是 bundle.js
    bundle:path.resolve(__dirname,"../src/main.js")
  },
  output: {
    // 最终打包文件放在dist目录中
    path: path.resolve(__dirname, '../dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules目录引用的模块
        use: [
          {
            loader: "babel-loader",
            options: {
              // 预处理
              "presets":[ // 预处理
                [
                  "@babel/preset-env",
                  {
                    useBuiltIns: "usage" // 用到了就转义, 没用到就不管
                  }
                ]
              ]
            }
          }
        ]
      },
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              outputPath: './image',
              name:"[name]_[hash].[ext]",
              esModule: false
              // 当模板文件里面有图片的时候，也可以正常挪到上述目录
            }
          }
        ]
      },
      {
        test: /\.(css|scss)/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html')
    }),
    new VueLoaderPlugin()
  ],
  resolve: {
    // 可以省略知道文件的后缀名
    extensions: ['.js', '.json', '.vue', '.scss', '.css']
  }
}

webpack.dev.js

let merge = require('webpack-merge')
let commonConfig = require('./webpack.common')
let webpack = require('webpack')
let path = require('path')

const devConfig = {
  mode: "development",
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, '../dist'),
    port: 8080, // 本地模拟服务器端口
    open: true, // 运行开发环境，打开浏览器
    hot: true, // 热更新
    hotOnly: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin() // 启用热更新
  ]
}

module.exports = merge(commonConfig, devConfig)

webpack.prod.js

const marge = require('webpack-merge')
const commonConfig = require('./webpack.common')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");// 每次打包文件, 都清除上一次打包的内容

const prodConfig = {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new CleanWebpackPlugin()
  ]
}

module.exports = marge(commonConfig, prodConfig)

main.js

import Vue from "vue";
import App from "./App";

new Vue({
  el: "#app",
  render: h=>h(App)
})

App.vue

<template>
  <div id="app">
    <h1 class="title">
      {{msg}}
    </h1>
    <img src="./assets/images/5d0d3329493f1390f04e33c324a2c66.jpg" alt="">
  </div>
</template>
<script>
  export default {
    name: "App",
    data(){
      return{
        msg: "吃花椒酱的喵",
        index: 0,
        data: []
      }
    },
    methods: {
      request () {
        return new Promise((res, rej) => {
          res({ data: 1 })
        })
      }, // 假装时axios请求
      fn () {
        new Promise((res, rej) => {
          res(this.index)
        }).then((index) => { // index 就是
          this.request().then((requestData) => {
            requestData['clickIndex'] = index
            this.data.push(requestData)
          })
        })
      }
    }
  }
</script>
<style lang="scss">
  @import "./src/assets/css/app";
  .title{
    text-align: center;
    color: aquamarine;
  }
</style>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>