webpack4搭建简单的vue项目

最新推荐文章于 2024-08-29 16:21:36 发布

原创最新推荐文章于 2024-08-29 16:21:36 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

webpack

7 篇文章

订阅专栏

本文详细介绍了使用Webpack和Vue进行项目构建的过程，包括配置文件、依赖包安装、常见问题解决等，适合初学者和进阶开发者参考。

文件目录

在这里插入图片描述

主要文件

配置文件代码

package.json

{
  "name": "webpack_vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "autoprefixer": "^9.6.1",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.1.0",
    "file-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "postcss-loader": "^3.0.0",
    "url-loader": "^2.1.0",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.3.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@babel/runtime": "^7.5.5"
  }
}

webpack.config.js

const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        // 指定打包好的文件放置的目录
        path: path.resolve(__dirname, "dist"),
        // 使用哈希，这里就会生成一堆乱码
        filename: "js/bundle.[hash].js"
    },
    plugins: [
        new CleanWebpackPlugin({
            // 指定当前文件所在的目录下的dist文件夹
            path: "./dist"
        }),
        new HtmlWebpackPlugin({
            // 指定模板文件
            template: "./src/index.html"
        }),
        new MiniCssExtractPlugin({
            // 打包后的文件名
            filename: 'style.css'
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            // 配置js的loader
            {
                test: /\.js$/,
                use: {
                    // 打包编译ES6语法
                    loader: "babel-loader",
                    options: {
                        presets: [
                            // 用于将高级语法转换为低级语法
                            "@babel/preset-env"
                        ],
                        plugins: [
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            // 配置样式的loader 
            {
                test: /\.css$/,
                use: [
                    process.env.NODE_ENV !== 'production' ?
                    'vue-style-loader' :
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    process.env.NODE_ENV !== 'production' ?
                    'vue-style-loader' :
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ]
            },
            // 配置图片的loader
            {
                test: /\.(jpg|jpeg|png|gif|)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        // 超过1000k转为base64，这里只是作为一个例子，可以自己设置大小
                        limit: 1000 * 1024,
                        // 图片所在的文件夹
                        outputPath: "img"
                    }
                }
            },
            // 配置字体图标的loader
            {
                test: /\.(eot|woff|woff2|ttf)$/,
                use: {
                    loader: "url-loader"
                }
            },
            // 配置单文件组件.vue的loader
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    devServer: {
        // 运行的端口号
        port: 3000,
        // 运行的文件路径
        contentBase: "./dist",
        // ip地址
        host: "192.168.124.6",
        // 热更新
        hot: true,
        open: true
    }
}

postcss.config.js

const autoprefixer = require("autoprefixer")
module.exports = {
    plugins: [autoprefixer]
}

源文件

main.js

import Vue from 'vue'
import App from "./com/App.vue"

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

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>