webpack搭建vue脚手架

Heartbroken_man

已于 2022-02-14 11:25:01 修改

阅读量2.4k

点赞数

分类专栏： webpack 文章标签： vue.js webpack

于 2021-08-31 17:54:40 首次发布

本文链接：https://blog.youkuaiyun.com/Heartbroken_man/article/details/120021046

版权

本文介绍了如何基于webpack手动搭建Vue脚手架项目，包括项目目录结构、webpack配置、vue-loader的安装与使用，以及开发和生产环境的配置。在过程中解决了样式处理、process找不到的问题，并给出了完整项目所需的依赖列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前搞过的webpack版本搭建vue脚手架项目，今天分享一下！

在读这篇文章之前你可能需要了解一些webpack的配置才行

否则可能看不懂部分配置

首先我们的项目的src目录结构如下

基本上与vue-cli3的结构一样，你可以直接创建vue-cli3的脚手架直接复制里面的项目目录结构

新增命令行

在package.json文件里面的scripts字段里面新增这样一条命令，这样我们就可以在控制台输入npm run build执行webpack.config.js里面的配置

"build": "webpack --config webpack.config.js "

以下这些配置是打包原生项目的配置，如果看不懂的话。可以读一下我另外两篇文章webpack配置--css和js兼容不同浏览器、webpack基础配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");;
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
const fs=require("fs");
const config = {
    entry: {
        index: './src/main.js'
    },
    output: {
        filename: 'static/js/[name]_[hash].js',
        path: path.resolve(__dirname, 'dist'),
        environment: {
            arrowFunction: false, //true默认箭头函数
        }

    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            // Disables attributes processing
                            sources: true,
                        },
                    },
                ],
                generator: {
                    filename: "[name][ext]",
                },

            },
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    
                    // es6转es5
                    options: {
                        exclude: 'node_modules',//必须排除掉node_modules否则会冲突到其他loader
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "modules": false
                                }
                            ]
                        ],
                        plugins: [
                            [
                              "@babel/plugin-transform-runtime",
                              {
                                // corejs 3版本提供的内置函数，例如Promise,Set和Map，不然部分浏览器不兼容
                                "corejs": {
                                  "version": 3,
                                  "proposals": true
                                },
                                "useESModules": true
                              }
                            ]
                          ]

最低0.47元/天解锁文章